Titre Grid/Flexbox imbriqué poussant le contenu vers le bas

Question

J'essaie de créer une liste de membres d'équipe sur un site. Et il y a (toujours) ce type qui a un très long titre d'emploi qui pousse ses téléchargements de description de travail.

Cela a causé un désalignement avec les autres descriptions de travail et le concepteur est très OCD à ce sujet.

La seule solution que je trouve à ce jour est de limiter la description de l'emploi à 3 lignes avec:

font-size: 10px; 
height: 30px; 
line-height: 1; 

Cependant, il est l'erreur toujours pas la preuve si un titre de travail devient 4 lignes longues. De plus, les petits écrans peuvent même envelopper des textes courts pour dépasser 4 lignes. J'ai recherché la possibilité d'utiliser la grille css, mais je n'ai trouvé aucune solution à ce problème. Ces conditions doivent être remplies:

• Image Nom & titre et la description doit être aligné sur la même ligne
• Chacun des grille quatre doit avoir la même hauteur
• texte flexible
• Si nous pouvons résoudre cela sans utiliser MatchHeight de jQuery ce sera génial.

<div class="row small-up-1 medium-up-2 large-up-3"> 
    <% loop $Collection %> 
    <div class="column person"> 
     <div class="row column"> 
     <div class="person__photo"> 
      <img src="$Image.Url" class="person__photo--round" alt="$Name"> 
     </div> 
     </div> 
     <div class="row column text-center"> 
     <h4 class="person__name">$Name</h4> 
     <h5 class="person__role">$Role</h5> 
     </div> 
     <% if $Blurb %> 
     <div class="row column person__summary content">$Blurb</div> 
     <% end_if %> 
    </div> 
    <% end_loop %> 
</div> 

Answer 1

Pouvez-vous les mettre en rangs? Donc, faire quelque chose comme:

.headshot, .positionTitle, .description { 
 
\t width: 100px; 
 
\t min-height: 20px; 
 
\t border: solid 1px black; 
 
} 
 

 
.row { 
 
\t display: flex; 
 
\t flex-direction: row; 
 
\t justify-content: space-evenly; 
 
}

<div class="row"> <!-- Image row --> 
 
\t <div class="headshot"></div> 
 
\t <div class="headshot"></div> 
 
\t <div class="headshot"></div> 
 
\t <div class="headshot"></div> 
 
</div> 
 

 
<div class="row"> <!-- Title row --> 
 
\t <div class="positionTitle">Short</div> 
 
\t <div class="positionTitle">Short</div> 
 
\t <div class="positionTitle">Really really<br><br><br>long</div> 
 
\t <div class="positionTitle">Short</div> 
 
</div> 
 

 
<div class="row"> <!-- Description row --> 
 
\t <div class="description"></div> 
 
\t <div class="description"></div> 
 
\t <div class="description"></div> 
 
\t <div class="description"></div> 
 
</div>