JSFiddle - React, Tailwind, and code Playground

by Otobong Okoko

HTML

<div id="two" class="container col">
<p>
    <b>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</b>
</p>
<p>
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. 
</p>
<p>
    <b>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</b>
</p>
<p>
    Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
</p>
</div>

CSS

/* div {background:green;padding:10px;margin-bottom:5px;} */
* { box-sizing: border-box; padding: 0; margin: 0; }
p { margin-left: 16px; }
.container { width: 400px; border: 1px solid #f00; margin: 16px; }
.container.col { -webkit-columns: auto 120px; columns: auto 120px; }
.container > div { 
    -webkit-column-break-inside: avoid; column-break-inside: avoid; 
    display: block; padding: 8px; border: 1px solid #ccc;
}
#one { width: 200px; }
#two { width: 300px; }

JavaScript

$('p').replaceWith(function(){
  return $('<div>').addClass('post-stats').html($(this).contents());
});