JSFiddle - React, Tailwind, and code Playground
HTML
<div id="posts">
<div style="width:250px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:100px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:170px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:120px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:110px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:130px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:140px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:180px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:190px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:210px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:90px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
</div>
CSS
div div { float:left }
JavaScript
var lisInRow = 0;
$('div div').each(function() {
if($(this).prev().length > 0) {
if($(this).position().top != $(this).prev().position().top){
lisInRow++;
}
$(this).addClass("row"+lisInRow);
}
});