JSFiddle - React, Tailwind, and code Playground

HTML

<p>The result quickly starts to get funky when the number of elements doesn't fit neatly within the row count.</p>
<p>Note the repetition of 'e' and the absence of 'o' and 'p'</p><br/>

<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...

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 rowcount = 6; // I increase rowcount from 4 to 6 to accommodate the new elements
var colcount = 3;
var ichild=$('.directory-result-list-bottom').children();
var wf= "<li class='directory-result-text'>";
var wb= "</li>"
var k="";

$('.directory-result-list-bottom').empty();

for(var i = 0; i<rowcount; i++){
    carryover=0;
    for(var j=0; j<colcount; j ++){
        k=k+wf+(ichild[(j*rowcount)+i].innerHTML)+wb;
    }  
}    
document.getElementById('place').innerHTML=k;