JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul class="columns" data-columns="2">
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>G</li>
        <li>H</li>
    </ul>
</div>

CSS

ul {
    float: left;
    position: relative;
    margin-right: 20px;
}

JavaScript

(function($){
    var initialContainer = $('.columns'),
        columnItems = $('.columns li'),
        columns = null,
        column = 1; // account for initial column

    function updateColumns(){
        column = 0;
        columnItems.each(function(idx, el){
            if (column >= columns.length){
                column = 0;
            }
            console.log(column, el, idx);
            $(columns.get(column)).append(el);
			column += 1;
        });
    }

    function setupColumns(){
        columnItems.detach();
        while (column++ < initialContainer.data('columns')){
            initialContainer.clone().insertBefore(initialContainer);
            column++;
        }
        columns = $('.columns');
        updateColumns();
    }

    $(setupColumns);
})(jQuery);