Subir línea

El punto principal que se muestra aquí es el uso de justify-content: space-between, que coloca el primer y el último elemento secundario en los bordes de su cuadro de límite, con el espacio restante distribuido de manera uniforme entre los elementos. Para estas tarjetas, se colocan en el modo de visualización de flexbox, con la dirección que se establece en la columna mediante flex-direction: column.

De esta manera, se colocarán el título, la descripción y el bloque de imagen en una columna vertical dentro de la tarjeta principal. Luego, si aplicas justify-content: space-between, se fijan el primer elemento (título) y el último (bloque de imagen) en los bordes del contenedor flexible, y el texto descriptivo intermedio se coloca con un espaciado igual a cada extremo.

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

HTML

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

CSS

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