Mise en page côte à côte css

Bonjour
je souhaiterais faire quelque chose sur laquelle je bloque complètement.
J'ai plusieurs bloc à faire (6) et j'aimerais faire 3 lignes de 2. Dans ceux de gauche il y a un paragraphe et dans ceux de droite, une ligne de texte.
Voici mon html

<div id="partie1" class="partie">
        <div class="center">
            <p class="para">
              Mon paragraphe
            <h3>Titre H1 : Mon titre</h3>
        </div>
      </div>
      <div id="partie2" class="partie">
        <div class="center">
            <p class="para">
              Mon paragraphe
            </p>
            <h3>Mon titre</h3>
        </div>
      </div>

et le css :

.center{
  width: 1000px;
  margin: 0 auto;
}

#partie1 h3{
  width: 450px;
  display:inline-block;
  font-family: Arial;
  font-size: 60px;
  margin-left: 150px;
}

.para{
  width: 200px;
  display: inline-block;

}

.titre{
  margin-top: 50px;
}

#partie2 h3{
  width: 450px;
	display:inline-block;
  font-family: Arial;
  font-size: 20px;

}

Alors lorsque je mets un display inline block sur .para #partieN h3 les h3 se calent sur la dernière ligne du paragraphe. Je souhaiterais placer le titre au milieu du paragraphe ou en haut au pire des cas mais je n'arrive pas à le faire.
J'ai essayé en mettant des margin-top négatif mais ça ne fonctionne pas.

Pouvez vous m'aider svp ?

Bonjour,

Il faut que tu revois ton html. Ta balise <p> n'est pas fermée.

Regarde ça: https://jsfiddle.net/ot0vsmsv/

Il faut que tu rajoute 'text-align: center' sur le parent qui contient les titres.

en corrigeant le <p> non refermé, est ce que https://jsfiddle.net/ot0vsmsv/1/ vertical-align est ce que tu recherche ici ?

sinon, display:flex/table sont tout bon pour ce type de layout
Modifié par gcyrillus (23 Nov 2016 - 20:23)

Super ! merci beaucoup à vous 2