Aligner

Le point principal illustré ici est l'utilisation de justify-content: space-between, qui place les premier et dernier éléments enfants aux bords de leur cadre de délimitation, avec l'espace restant réparti uniformément entre les éléments. Ces fiches sont placées en mode d'affichage Flexbox, et la direction est définie sur la colonne à l'aide de flex-direction: column.

Le titre, la description et le bloc d'image sont ainsi placés dans une colonne verticale à l'intérieur de la carte parente. Ensuite, l'application de justify-content: space-between ancre le premier (titre) et le dernier (bloc d'images) sur les bords du conteneur flexible. Le texte descriptif situé entre ceux-ci est ensuite placé avec un espacement égal à chaque extrémité.

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<div class="container">
  <div class="card">
    <h3>Title - Card 1</h3>
    <p contenteditable>Medium length description with a few more words here.</p>
    <div class="visual"></div>
  </div>
  <div class="card">
    <h3>Title - Card 2</h3>
    <p contenteditable>Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
    <div class="visual"></div>
  </div>
  <div class="card">
    <h3>Title - Card 3</h3>
    <p contenteditable>Short Description.</p>
    <div class="visual"></div>
  </div>
</div>

        .container {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}

.visual {
  height: 100px;
  width: 100%;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  justify-content: space-between;
}

h3 {
  margin: 0
}