JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Quisque tincidunt ipsum ac ante commodo non.</li>
<li>Lorem</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Quisque tincidunt ipsum ac ante commodo non suscipit tortor volutpat.</li>
<li>Quisque tincidunt ipsum</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem</li>
</ul>
</body>
</html>
CSS
ul {
margin: 0;
padding: 0;
width: 440px;
list-style: none;
}
li {
float: left;
width:100px;
margin: 5px;
background: orange;
}
JavaScript
var li = $('li'), /* Получаем все элементы списка */
liHeight, /* Высота элемента */
heightMax, /* Максимальная высота */
rowLi; /* Ряд элементов */
/* Проходимся по каждому ряду */
for (var i = 0, max = li.length; i < max; i += 4) {
heightMax = 0;
rowLi = li.eq(i); /* Получаем первый элемент ряда */
/* Проходимся по всем элементам в ряду */
for (var j = 0; j < 4; j++) {
/* Добавляем последовательно каждый элемент ряда */
rowLi = rowLi.add(li.eq(i + j));
/* Вычисляем высоту элемента ряда */
liHeight = li.eq(i + j).height();
/* Проверяем больше ли полученная высота максимальной */
heightMax = liHeight > heightMax ? liHeight : heightMax;
}
rowLi.css('height', heightMax); /* Присваем ряду максимальную высоту */
}