JSFiddle - React, Tailwind, and code Playground

HTML

<div class="CountryList">
    <ul>
    <li><a href="/english">Global</a>
    </li>
    <li><a href="/ar/spanish">Argentina</a>
    </li>
    <li><a href="/au/english">Australia</a>
    </li>
    <li><a href="#">Austria</a>
    </li>
    <li><a href="#">Czech Republic</a>
    </li>
    <li><a href="/dk/english">Denmark</a>
    </li>
    <li><a href="/de/german">Germany</a>
    </li>
    <li><a href="#">Hungary</a>
    </li>
    <li><a href="/lb/english">Lebanon</a>
    </li>
    <li><a href="/m/french">Morocco</a>
    </li>
    <li><a href="/nl/english">Netherlands</a>
    </li>
    <li><a href="/nz/English">New Zealand</a>
    </li>
    <li><a href="/ru/russian">Russia</a>
    </li>
    <li><a href="/english">Slovakia</a>
    </li>
    <li><a href="/za/English">South Africa</a>
    </li>
    <li><a href="/tr/turkish">Turkey</a>
    </li>
    <li><a href="/ae/english">United Arab Emirates</a>
    </li>
    <li><a href="/uk/english">United Kingdom</a>
    </li>
    <li><a href="/us/english">United States</a>
    </li>
</ul>

CSS

.CountryList {
    -moz-column-count: 10;
    -webkit-column-count: 10;
    column-count: 10;
    height: 100px;
    -moz-column-gap: 100px;
    -webkit-column-gap: 100px;
    column-gap: 100px;
}