JSFiddle - React, Tailwind, and code Playground

by Amens

HTML

<ul class="column-3">
    <li>HEAD</li>
    <li>test2</li>
    <li>test3</li>
    <li>test4</li>
    <li>test5saddddddddddddd asddadadasdasdasdasdasdasdasdasdasasdasd sasdasdasdasdasdsadsa</li>
    <li>test6</li>
    <li>test6</li>
</ul>

CSS

li {
    padding:10px;
}


li.subcolumn {
    color: red;
}

li.reset {
    background: green;
}

li.prevcolumn {
    background:blue;
}

JavaScript

setTimeout(function splitMenu() {

  var splitter = Math.round(((jQuery("ul.column-3 li").length -1)/2));
  var offset = 0;

  jQuery.each( jQuery("ul.column-3").children(), function (ev){
    
    if  (ev >= splitter) {
        jQuery( this ).addClass("subcolumn");
        if  (ev == splitter) {
            jQuery( this ).addClass("reset");
        }
    }
    else {
        var height = jQuery( this ).outerHeight();
        alert(height);
        offset = offset + height;
    }

  });
    
    offset = offset - jQuery( "ul.column-3 li:first-child" ).outerHeight();
    
  jQuery("ul.column-3 li.reset").css("margin-top","-" + offset + "px");

}, 1000);

splitMenu();