CSS how to align content on different cards table like

Question

I'm facing an issue where I need to keep the content of multiple cards in a row aligned like in a table but i need to generate the markup card by card and not row by row.

This is what i have :

And this is want i want :

.wrapper {
  display: flex;
  max-width: 1000px;
  gap:5px;
}

.card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: 1px solid red;
  
  &__title {
    font-weight: bold;
  }
  
  &__descr {
  }
  
  &__cta {
  }
}

<div class="wrapper">
  <div class="card">
    <div class="card__image">
      <img src="https://i.ibb.co/34S4L8B/image-placeholder.jpg" alt="image-placeholder"/>
    </div>
    <div class="card__title">
      Tilte 1 <br /> &nbsp;
    </div>
    <div class="card__descr">
      Lorem lorem lorem lorem lorem lorem lorem lorem lorem
      lorem lorem lorem lorem
      lorem lorem lorem lorem
      lorem lorem lorem lorem
      lorem lorem lorem lorem
      lorem lorem lorem lorem
      lorem lorem lorem lorem
      lorem lorem lorem lorem
      lorem lorem lorem lorem
      lorem lorem lorem lorem
    </div>
    <div class="card__cta">
      <button>button 1</button><br />
      <button>button 2</button><br />
      <button>button 3</button>
    </div>
  </div>
  
  
  <div class="card">
    <div class="card__image">
      <img src="https://i.ibb.co/34S4L8B/image-placeholder.jpg" alt="image-placeholder"/>
    </div>
    <div class="card__title">
      Tilte 1 <br />
      Title 2
    </div>
    <div class="card__descr">
      Lorem lorem lorem lorem lorem lorem lorem lorem lorem
    </div>
    <div class="card__cta">
      <button>button 1</button><br />
    </div>
  </div>
  
  
  <div class="card">
    <div class="card__image">
      <img src="https://i.ibb.co/34S4L8B/image-placeholder.jpg" alt="image-placeholder"/>
    </div>
    <div class="card__title">
      Tilte 1
    </div>
    <div class="card__descr">
      Lorem lorem lorem lorem lorem lorem lorem lorem lorem
    </div>
    <div class="card__cta">
      <button>button 1</button><br />
      <button>button 2</button><br />
    </div>
  </div>
</div>

Any idea ? I cannot use tables as the cards are generated one by one and not row by row.

Thanks a lot

(Link to codepen for more convenience : https://codepen.io/clement-enjolras/pen/QWMdPWV)