JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<ul class="two_ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

CSS

ul{display:block;float:left;margin:25px;}
.left li{color:red;}

JavaScript

$('.two_ul').each(function(i){
        var colsize = Math.round($(this).find("li").size() / 2);
        $(this).find("li").each(function(i){
            if (i>=colsize){
                $(this).addClass('right');}
        });
        $(this).find('.right').insertAfter(this).wrapAll("<ul class='left'></ul>");
    });