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>
            
        </ul>
    </div>

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 = 4;
var colcount = 3;
var ichild=$('.directory-result-list-bottom').children();
var wf= "<li class='directory-result-text'>";
var wb= "</li>"
var k="";
var u;
var v;
var carryover=0;

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

for(var i = 0; i<rowcount; i++){
    carryover=0;
    for(var j=0; j<colcount; j ++){
        v= i+j;
        u=j;
        if(v>2){
            v=v-3;
            carryover=1;
        }
        if(carryover==1){
            u++;
        }
        k=k+wf+(ichild[(u*colcount)+v].innerHTML)+wb;
    }  
}    
document.getElementById('place').innerHTML=k;