html 横並び要素を並び替えた後で動的に高さを揃える

Question

二個横並びで多数の要素をリスト化します。
（左右二個×10行）

その要素は動的に並び替えを行うのですが（金額等で）

並び替えた後、横並び二つの要素の高さを揃えたいです。

ページを読み込み直す事なく。

高さを揃えるプラグインなどで動的に使用可能なものなどございますでしょうか。

ページを読み込み直す際に高さを揃えるものは存じ上げております。

ご教示いただけますでしょうか。

※追記
IE8まで対応できると幸いです。

Comments

[s8_chu]

現状のコードがどのようなものになっているか追記していただけませんか？

[axxxx]

まだソースを書き始める前でして

Answer 1

flexでいいかと
jsfiddle

flex-wrap:wrap;忘れずに

Comments

[axxxx]

ご教示ありがとうございます

試みてみます

[sousuke]

ie8ならdisplay:table系ですかね。ie8とかは先に書いたほうがいいですよ。特殊環境ですので。

[axxxx]

ご教示ありがとうございます。

要件をかかずに質問してしまい、すみませんでした。

検証致します。

Answer 2

flexboxが出ているので、grid layoutにしようと思ったのですが、

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

ここまではいいものの、IEに対応しようとすると

.grid {
  display: -ms-grid;
  -ms-grid-columns: 1fr 1fr;
  -ms-grid-rows: auto auto;
}

.grid > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.grid > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}
/* 以下略 */

……あ、つらいです。

Comments

[axxxx]

ご教示ありがとうございます

記述忘れましたがIE対応必須でして。