JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<div class="column">
<!--   data Start -->
<p>This is paragraph 1. Lorem ipsum ... </p>
<p>This is paragraph 2. Lorem ipsum ... </p>
<p>This is paragraph 3. Lorem ipsum ... </p>
<p>This is paragraph 4. Lorem ipsum ... </p>
<p>This is paragraph 5. Lorem ipsum ... </p>
<p>This is paragraph 6. Lorem ipsum ... </p>
<!--   data Emd-->
</div>

<div class="column"></div>
<div class="column"></div>

CSS

.column {
    border: 5px solid orange;
    float: left;
    width: 150px;
}

div:nth-child(2) {
    border: 5px solid red;
}

div:nth-child(3) {
    border: 5px solid yellow;
}
}

JavaScript

$(document).ready(function() {
    var $columns = $('.column'),
        $data = $columns.first().find('p'),
        size = $data.size(),
        columnSize = size / $columns.length;
    
    $data.each(function (index) {
        var column = Math.floor(index / columnSize);
        $(this).appendTo($columns.eq(column));
    });
});