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;
}

JavaScript

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