Unaligned card text

So, I have a couple of cards I've created. My issue with the cards is that when one title of a card content is longer than the other cards, I want to know if it's possible for text description of the other cards to adapt / move to the same level as the card with the longer title text.

I know my explanation doesn't make sense, but check out the images and code, you'll understand much better.

.card-container {
  display: flex;
  gap: 1rem;
}

.card {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.name {
  font-size: 2rem;
}

.card img {
  width: 100%;
}

<body>
  <div class="card-container">
    <div class="card">
      <div class="card-content">
        <div class="card-content__img">
          <img src="p1 (2).jpg" alt="" />
        </div>
        <h3 class="card-header">
          Adventure Tours Adventure ToursAdventure ToursAdventure Adventure Tours Adventure ToursAdventure ToursAdventure
        </h3>
        <p class="card-description">
          Experience the thrill of a lifetime with our adventure tours. From hiking through breathtaking mountain ranges to conquering raging whitewater rapids, our expert guides will take you on unforgettable journeys filled with excitement and discovery.
        </p>
      </div>
    </div>

    <div class="card">
      <div class="card-content">
        <div class="card-content__img">
          <img src="p1 (2).jpg" alt="" />
        </div>

        <h3 class="card-header">Wilderness Retreats</h3>
        <p class="card-description">
          Escape the hustle and bustle of everyday life and immerse yourself in the tranquility of nature with our wilderness retreats. Unplug from technology, reconnect with yourself, and find serenity in the beauty of pristine landscapes and peaceful surroundings
        </p>
      </div>
    </div>

    <div class="card">
      <div class="card-content">
        <div class="card-content__img">
          <img src="p1 (2).jpg" alt="" />
        </div>

        <h3 class="card-header">Nature Photography Workshops</h3>
        <p class="card-description">
          Capture the stunning beauty of the natural world with our nature photography workshops. Learn from professional photographers, hone your skills, and explore picturesque locations as you develop a deeper connection with nature and create breathtaking images
          to cherish forever.
        </p>
      </div>
    </div>
  </div>
</body>

Screenshot

Solution

You want to set the height of the card-header class dynamically to the height of the greatest card-header element?

You can do it with flex-grow.

Here is the CSS:

.card-content
{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.card-header {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  flex-grow: 1;
}

As you can see, the card-content class is now also a flex-box with 100% of height, and the card-header get the flex-grow.

Hope this will help.