JSFiddle - React, Tailwind, and code Playground

by inser

HTML

<div class="spans table col-2">
    <div class="row">
        <span>1</span>
        <span>2</span>
    </div>
    <div class="row">
    <span>3</span>
    </div>
    <span>4</span>
    <span>5</span>
</div>

CSS

span {
    display: table-cell;
}

.spans {
    width: 100%;
    display: table;
}

span {
    width: 33%;
}

.row {
    display: table-row;
}

JavaScript

$(document).ready(function() {   
    var count = $('.spans span').length;
    if(count == 0) return;
    
    $('.row').each(function() { $(this).children(':first').unwrap(); });
    
    var columns = 3;
    var width = 100 / columns;
    
    for(var i = 0; i < Math.round(count / columns) + 1; i++) {
        var spans = $('.spans span').slice(i * columns, (i + 1) * columns);

        if(spans.length > 0)
            spans.wrapAll('<div class="row" />');
    }
});