JSFiddle - React, Tailwind, and code Playground

by Mark Kimitch

HTML

<ul class="columned">
        <li>Australia</li>
        <li>Brazil</li>
        <li>Canada</li>
        <li>Chile</li>
        <li>China</li>
        <li>France</li>
        <li>India</li>
        <li>Italy</li>
        <li>Malaysia</li>
        <li>Norway</li>
        <li>Russia</li>
        <li>United Kingdom</li>
        <li>United States</li>
    </ul>

CSS

li {
  line-height: 1.2em;
  position: relative;
}
.column1 {
    margin-left: 0em;
    color: red;
}
.column2 {
    margin-left: 10em;
    color: green;
}
.column3 {
    margin-left: 10em;
    color: blue;
}

JavaScript

var colLength = $('.columned li').length;
var colHeight = $('.columned').height();
var liHeight = $('.columned li').height();
if ($('.columned li').length % 2 != 0) {
    var third = (Math.round(colHeight / 2)) + liHeight / 2;
} else {
    var third = Math.round(colHeight / 2);
}
var firstrow = Math.ceil(colLength / 2);
var secondrow = firstrow + 1;
var thirdrow = secondrow + 1;
$('.columned li:nth-child(-n+' + firstrow + ')').addClass('column1');
$('.columned li:nth-child(n+' + secondrow + ')').addClass('column2');
$('.columned li:nth-child(n+' + thirdrow + ')').addClass('column3');
$('.columned li:nth-child(' + secondrow + ')').css('margin-top', -third);
$('.columned li:nth-child(' + thirdrow + ')').css('margin-top', -third);