JSFiddle - React, Tailwind, and code Playground

by duopixel

HTML

<p id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis ornare odio, sed tincidunt velit laoreet at. Donec gravida risus non magna euismod scelerisque sit amet auctor magna. Phasellus sed egestas orci. Donec egestas vulputate massa, in pharetra erat blandit eget. Maecenas ac arcu ligula.</p>

CSS

#text{
    margin: 2px;
}
#text p{
    padding:0 2%;
    width:29%;
    float:left;
    text-align:justify;
    text-justify: distribute-all-lines;
    border-right: 1px solid grey;
}
#text :last-child{
    border:none;
}

JavaScript

var text=document.getElementById('text').innerHTML;
var words=text.split(" ");
var wordc=words.length;
var length=words.join("").length;
var cols= new Array("","","");
var colc= new Array(0,0,0);
var col=0;

for(var i=0; i<wordc; i++){
    cols[col]+=words[i]+" ";
    if( (colc[col]+=words[i].length)>length/3)col++;
}


document.getElementById('text').innerHTML="<p>"+cols[0]+"</p><p>"+cols[1]+"</p><p>"+cols[2]+"</p>";