One row in columns same height within flexbox column

Question

1. I have 3 columns, with the flexbox I realized all columns are the same height.

2. In the columns there is a title row, and I want all the title rows are the same height so the image is aligned horizontal at the same heigth.

I managed to get the column height the same with the flexbox. But how could I get the title height the same?

.flex .col img {
  width: 100%;
  height: auto;
}

.flex {
  display: flex;
  justify-content: center;
  max-width: 100%;
  margin: auto;
  flex-wrap: wrap;
  gap: 25px;
}

.flex .col {
  display: flex;
  flex-direction: column;
  flex: 1 1 242px;
}

.flex .col .btn {
  align-self: flex-start;
  margin-top: auto;
}

<section>
  <div class="flex">
    <div class="col">
      <h1>
        <span class="pushtop5">Title 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</span>
      </h1>
      <a href="#">
        <div class="boxholder rnd5">
          <img class="rnd5" src="images/test.jpg" width="" height="" alt="Some sample words">
        </div>
      </a>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae</p>
      <footer class="pushtop5 btn">
        <a href="#" class="button small green rnd5">Read more &raquo;</a>
      </footer>
    </div>

    <div class="col">
      <h1><span class="pushtop5">Title 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</span></h1>
      <a href="#">
        <div class="boxholder rnd5">
          <img class="rnd5" src="images/test.jpg" width="" height="" alt="Some sample words">
        </div>
      </a>
      <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa</p>
      <footer class="pushtop5 btn">
        <a href="#" class="button small orange rnd5">Read more &raquo;</a>
      </footer>
    </div>

    <div class="col">
      <h1>
        <span class="pushtop5">Title 3: Lorem ipsum dolor sit amet, consectetur</span>
      </h1>
      <a href="#">
        <div class="boxholder rnd5">
          <img class="rnd5" src="images/test.jpg" width="" height="" alt="Some sample words">
        </div>
      </a>
      <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores</p>
      <footer class="pushtop5 btn">
        <a href="#" class="button small red rnd5">Read more &raquo;</a>
      </footer>
    </div>
</section>