JSFiddle - React, Tailwind, and code Playground
HTML
<div class="column">
<!-- data Start -->
<p>1. This is paragraph Lorem ipsum ... </p>
<p>2. This is paragraph Lorem ipsum ... </p>
<p>3.This is paragraph Lorem ipsum ... </p>
<p>4.This is paragraph Lorem ipsum ... </p>
<p>5.This is paragraph Lorem ipsum ... </p>
<p>6.This is paragraph Lorem ipsum ... </p>
<!-- data Emd-->
</div>
<div class="column"></div>
<div class="column"></div>
CSS
.column {
border: 5px ;
float: left;
width: 200px;
}
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));
});
});