JSFiddle - React, Tailwind, and code Playground

HTML

<div class="directory-result">
        <ul class="directory-result-list-bottom" id="place">
            
            
            <li class="directory-result-text"><a href="/uk/groupfactsheet/abbeylife">
                a
            </a></li>
            
            
            <li class="directory-result-text"><a href="/uk/groupfactsheet/aberdeen">
                b
            </a></li>
            
            
            <li class="directory-result-text"><a href="/uk/groupfactsheet/acpi">
                c
            </a></li>
            
            
            <li class="directory-result-text"><a href="/uk/groupfactsheet/adelante">
                d
            </a></li>
            
            
            <li class="directory-result-text"><a href="/uk/groupfactsheet/adelphi">
                e
            </a></li>
            
            
            <li class="directory-result-text"><a href="/uk/groupfactsheet/alceda">
                f
            </a></li>
            
            
            <li class="directory-result-text"><a href="/uk/groupfactsheet/aletti">
                g
            </a></li>
            
            
            <li class="directory-result-text"><a href="/uk/groupfactsheet/algersicav">
                h
            </a></li>
            
            
            <li class="directory-result-text"><a href="/uk/groupfactsheet/AllianzGlobalInvestors">
                i
            </a></li>
            
            
            <li class="directory-result-text"><a href="/uk/groupfactsheet/allieddunbar">
                j
            </a></li>
            
            
            <li class="directory-result-text"><a href="/uk/groupfactsheet/alter">
                k
            </a></li>
            
            
            <li class="directory-result-text"><a href="/uk/groupfactsheet/americancentury">
                l
            </a></li>
            
            <!-- I add a number of more elements -->
           ...

CSS

.directory-result, .canned-screens-list {
    clear: both;
}

#ContentArea .directory-result ul {
    float: left;
    font-size: 12px;
    list-style: none outside none;
    margin: 0 0 32px;
    padding: 0;
}

.directory-result li.directory-result-text {
    border-top: 1px solid #E9DECF;
    margin-right: 12px;
    overflow: hidden;
    padding: 6px 0;
    width: 176px;
}

.directory-result li {
    float: left;
    margin: 0;
}

.directory-result a, .canned-screens-list a {
    text-align: center;
}

.directory-result a, .canned-screens-list a {
    text-align: center;
}

JavaScript

var $element = $('#place');
var $boxes = $element.find(' > li');

var $elementWidth = $boxes.outerWidth(true),
    elementCount = $boxes.length;

(function() {
    var perRow = Math.floor($element.width() / $elementWidth),
        i, j, $thisColumn, inc;

    for (i = 0; i < perRow; i++) {
        $thisColumn = $('<div class="tempColumn" />').appendTo($element).css({
            width: $elementWidth,
            float: 'left'
        });
        inc = Math.ceil(elementCount / perRow);
        for (j = inc * i; j < inc * (i + 1); j++) {
            $boxes.eq(j).appendTo($thisColumn);
        }
    }
})();