テキストの折り返しによって発生したheightの差異でレイアウトが崩れ気味になってしまう

スマホ画面に縮めた際、テキストの折り返しが発生し、レイアウトが整列しておらずなんだか気持ち悪い。
最初はSASSでこの問題を解決しようと思ったが流石に無理っぽそうなので諦めた。
仕方ないのでjQueryでこの高さの差異を埋めることにしました。

jQueryを使い、高さを揃える

以下のコードで高さを揃えることができます。
レスポンシブに対応しているのでどんなに高さが可変しても合わせてくれるはずです。

// ページ内の全ての .p-container__postTitle の高さを取得する
const postTitles = document.querySelectorAll('.p-container__postTitle');
let heights = [];
for (let i = 0; i < postTitles.length; i++) {
  heights[i] = postTitles[i].clientHeight;
}

let height, heightLarge, lastHeight;
for (let i = 0; i < postTitles.length; i++) {
  height = heights[i];
  // 最初のループ以外で、前回の高さと異なる場合
  if (i > 0 && height !== lastHeight) {
    // 一つ前の要素と比較して大きい方を heightLarge に代入する
    if (height > lastHeight) {
      heightLarge = height;
      postTitles[i-1].style.height = `${heightLarge}px`;
    } else {
      heightLarge = lastHeight;
      postTitles[i].style.height = `${heightLarge}px`;
    }
  }
  // 最後の要素でループが終了した場合
  if (i === postTitles.length - 1) {
    postTitles[i].style.height = `${heightLarge}px`;
  }
  lastHeight = height;
}

コードの処理内容（クラス名・変数は任意のものに置き換えてください）

1. 存在するすべての”p-container__postTitle”というクラスのheightを順繰りに取得。

2. その際の変数は”height”。（変数名は自分の流儀に合わせて適宜変更）

3. ループが2回実行される度に、先ほど宣言した変数"height"の値が異なるかどうかチェックする条件を設けています。
2回実行されるたびに条件を設ける理由としては、２カラムで配列されているためです。
各々ループで取得した値を格納しているので、その値をチェックする条件を設けることで整合性の取れた処理になります。

4. 値が異なった場合、値が大きい方の変数を"heightLarge"という変数に代入する。
値を合わせるための処理。

5. ”p-container__postTitle”のプロパティである"height"の値を"heightLarge"として適用。
5-1. 適用の条件
・ループのインデックスと”p-container__postTitle”のインデックスが紐づくように設定。
・すでに比較し終わったインデックス番号のものは省く処理も記載しています。

最終的にこのようになります。

整列されて綺麗になりました。
レスポンシブ対応したコードなのでどんなデバイスにも対応しており、改行によるレイアウト崩れには悩まされることはなくなるでしょう。