JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

CSS

.wrap {
  width: 300px;
  margin: 30px auto;    
}
.item {
  width: 140px;
  background-color: #000;
  margin: 5px;   
}
.item {
  float: left;
  clear: left;
}
.item.right {
  float: right;
  clear: right;
}

JavaScript

var left_column_height = 0;
var right_column_height = 0;
var items = $('.item');
for (var i = 0; i < items.length; i++) {
    
    /* this is purely to show vaird heights, the content would create the height...
    begin fpo: */
    items.eq(i).height(Math.floor(Math.random() * 100) + 10);
    /* end fpo: */
    
    if (left_column_height > right_column_height) {
        right_column_height+= items.eq(i).addClass('right').outerHeight(true);
    } else {
        left_column_height+= items.eq(i).outerHeight(true);

    }
}