Righe su

Il punto principale dimostrato qui è l'uso di justify-content: space-between, che posiziona il primo e l'ultimo elemento secondario ai bordi del riquadro di delimitazione, con lo spazio rimanente distribuito uniformemente tra gli elementi. Per queste schede, vengono posizionate in modalità di visualizzazione flexbox, con la direzione impostata su colonna utilizzando flex-direction: column.

Il titolo, la descrizione e il blocco immagine verranno inseriti in una colonna verticale all'interno della scheda principale. Quindi, l'applicazione di justify-content: space-between ancorati il primo (titolo) e l'ultimo (blocco immagine) ai bordi del contenitore flessibile e il testo descrittivo tra questi viene posizionato con la stessa spaziatura tra i punti finali.

.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
}