JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="startList">
</ul>

CSS

ul{float:left; width:20%; border: 1px solid #CCC; margin-bottom:10px; height:420px}

JavaScript

createStarterList(100);


/* set max height of containers */
var maxHt=400;

var $list=$('#startList')
var $container=$list.parent();

var $li=$list.find('li');

var totHt=0;
var totItems=$li.length;
$li.each(function( idx){
    
    var ht=$(this).height();
    if( totHt + ht >= maxHt || idx==totItems-1){
        $('<ul>').append( $(this).prevAll().andSelf() ).appendTo( $container );
        totHt=0;
    }else{
        totHt += ht;
    }    
    
});

$list.remove();


/* helper func*/
function createStarterList(qty) {
    for (i = 0; i < qty; i++) {
        var ht=17+Math.random()*20 
        $('#startList').append('<li style="height:'+ht+'px" >Item ' + (i + 1) + '</li>');
    }
}