要素の高さを揃える

display: flex

display: grid

js（jquery）

display: flex で揃える

align-items: stretch;はデフォルト指定
親要素に align-items 、子要素に height: 100%; を指定すると効かない
タイトルあるいはコピー部分の高さを統一しないとレイアウトが崩れる（複数箇所では高さが揃わない）

夏目漱石の小説「坊ちゃん」

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。

徒然草

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。

盛岡で青春時代をすごした宮沢賢治の作品「ポラーノの広場」

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

徒然草

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。

盛岡で青春時代をすごした宮沢賢治の作品「ポラーノの広場」

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

<div class="flex_lo">
  <div class="card1">
    <h3>夏目漱石の小説「坊ちゃん」</h3>
    <div class="thum"></div>
    <div class="text1">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて 一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。</div>
  </div>
  <div class="card1">
    <h3>徒然草</h3>
    <div class="thum"></div>
    <div class="text1">つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、 そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。</div>
  </div>
  <div class="card1">
    <h3>盛岡で青春時代をすごした 宮沢賢治の作品「ポラーノの広場」</h3>
    <div class="thum"></div>
    <div class="text1">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</div>
  </div>
  <div class="card1">
    <h3>徒然草</h3>
    <div class="thum"></div>
    <div class="text1">つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、 そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。</div>
  </div>
  <div class="card1">
    <h3>盛岡で青春時代をすごした 宮沢賢治の作品「ポラーノの広場」</h3>
    <div class="thum"></div>
    <div class="text1">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</div>
  </div>
</div>

.thum {
  background: #333;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  place-content: center;
  &:before {
    content: "Photo";
    display: inline-block;
    color: #fff;
  }
}

.flex_lo {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-between;

  & .card1 {
    display: flex;
    flex-direction: column;
    flex: 1 auto;
    background: #f5f5f5;
    width: 32%;

    & h3 {
      flex-shrink: 0;
      flex-grow: 1;
      padding: 1rem;
    }
    & .text1 {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin: 1rem;
    }
  }
}

display: grid で揃える

レイアウトによっては grid-area 調整が必要

display: grid;

夏目漱石の小説「坊ちゃん」

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。

徒然草

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。

盛岡で青春時代をすごした宮沢賢治の作品「ポラーノの広場」

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、

徒然草

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。

盛岡で青春時代をすごした宮沢賢治の作品「ポラーノの広場」

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、

<div class="flex_gr">
  <div class="card2">
    <h3>夏目漱石の小説「坊ちゃん」</h3>
    <div class="thum"></div>
    <div class="text2">親譲りの無鉄砲で...</div>
  </div>
  <div class="card2">
    <h3>徒然草</h3>
    <div class="thum"></div>
    <div class="text2">つれづれなるまゝに、...</div>
  </div>
  <div class="card2">
    <h3>盛岡で青春時代をすごした 宮沢賢治の作品「ポラーノの広場」</h3>
    <div class="thum"></div>
    <div class="text2">あのイーハトーヴォの...</div>
  </div>
  <div class="card2">
    <h3>徒然草</h3>
    <div class="thum"></div>
    <div class="text2">つれづれなるまゝに、...</div>
  </div>
  <div class="card2">
    <h3>ポラーノの広場</h3>
    <div class="thum"></div>
    <div class="text2">あのイーハトーヴォの...</div>
  </div>
</div>

.flex_gr {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 10px;
        margin-top: 70px;

        & .card2 {
          display: grid;
          gap: 0;
          grid-template-rows: subgrid;
          grid-row: span 3;
          background: #f5f5f5;
        & :is(h3, .text2) {
            padding: 1rem;
          }
        }
        .thum {
          background: #533;
        }
      }

jsで揃える

display: table; でレイアウト（プラグイン用レイアウト）

夏目漱石の小説「坊ちゃん」

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。

徒然草

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。

盛岡で青春時代をすごした宮沢賢治の作品「ポラーノの広場」

あのイーハトーヴォのすきとおった風、

徒然草

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。

盛岡で青春時代をすごした宮沢賢治の作品「ポラーノの広場」

あのイーハトーヴォのすきとおった風、

<div class="card-wrap">
  <div class="card">
    <h3 class="title">夏目漱石の小説「坊ちゃん」</h3>
    <p class="text">親譲りの無鉄砲で小供の時から...</p>
    <div class="thum"></div>
  </div>
  <div class="card">
    <h3 class="title">徒然草</h3>
    <p class="text">つれづれなるまゝに、日暮らし、硯にむかひて、...</p>
    <div class="thum"></div>
  </div>
  <div class="card">
    <h3 class="title">ポラーノの広場</h3>
    <p class="text">あのイーハトーヴォのすきとおった風、</p>
    <div class="thum"></div>
  </div>
</div>
<div class="card-wrap">
  <div class="card">
    <h3 class="title">徒然草</h3>
    <p class="text">つれづれなるまゝに、日暮らし、硯にむかひて、...</p>
    <div class="thum"></div>
  </div>
  <div class="card">
    <h3 class="title">ポラーノの広場</h3>
    <p class="text">あのイーハトーヴォのすきとおった風、</p>
    <div class="thum"></div>
  </div>
</div>

.card-wrap {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  border-spacing: 10px 0;

  & .card {
    display: table-cell;
    width: 33%;
    background: #f5f5f5;
    &:not(:first-child) {
      margin-left: 12px;
    }
    & h3 {
      padding-top: 10px;
      font-size: 1.1rem;
    }
    & .text {
      padding-bottom: 10px;
    }
    & :is(h3, .text) {
      padding-inline: 10px;
    }
    & .thum {
      background: #353;
    }
  }

  &.js .thum {
    background: #355;
  }
  & + .card-wrap {
    margin-top: 10px;
  }
}

.card, .card .title, .card .text,
 {
  transition: height 0.3s ease;
}

JS

const dialog = document.getElementById("myDialog");
const openBtn = document.getElementById("openBtn");
const closeBtn = document.getElementById("closeBtn");

openBtn.addEventListener("click", () => {
  dialog.showModal();
  requestAnimationFrame(() => {
    dialog.classList.add("show");
  });
});

closeBtn.addEventListener("click", () => {
  closeDialog();
});

dialog.addEventListener("click", (e) => {
  if (e.target === dialog) {
    closeDialog();
  }
});

function closeDialog() {
  dialog.classList.remove("show");
  dialog.addEventListener(
    "transitionend",
    () => {
      dialog.close();
    },
    { once: true }
  );
}

jquery

 function equalizeHeightsGroup($elements) {
  var max = 0;
  $elements.css("height", "auto");
  $elements.each(function () {
    var h = $(this).outerHeight();
    if (h > max) max = h;
  });
  $elements.height(max);
}

function adjustCardHeights() {
  var $cards = $(".card5");
  if (!$cards.length) return;

  $cards.css("height", "auto");
  $cards.find(".title5, .text5").css("height", "auto");

  var rowGroups = {};
  $cards.each(function () {
    var top = $(this).offset().top;
    if (!rowGroups[top]) rowGroups[top] = [];
    rowGroups[top].push(this);
  });

  $.each(rowGroups, function (_, row) {
    var $rowCards = $(row);
    equalizeHeightsGroup($rowCards.find(".title5"));
    equalizeHeightsGroup($rowCards.find(".text5"));
    equalizeHeightsGroup($rowCards);
  });
}

$(window).on("load", function () {
  adjustCardHeights();
});
let resizeTimer;
$(window).on("resize", function () {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(adjustCardHeights, 100);
});