JSFiddle - React, Tailwind, and code Playground
by Cath_kb
HTML
<div class="wrap">
<div class="one">
<div>
<span>abc</span> <span>def</span> <span>ghi</span><span>jkl</span><span>mno</span><span>pqr</span> <span>stu</span> <span>vwx</span> <span>yzz</span>
</div>
<div>
<span>abc</span> <span>def</span> <span>ghi</span><span>jkl</span>
</div>
</div>
<div class="two">
<div>
<span>abc</span> <span>def</span> <span>ghi</span><span>jkl</span><span>mno</span><span>pqr</span> <span>stu</span> <span>vwx</span> <span>yzz</span><span>abc</span> <span>def</span> <span>ghi</span><span>jkl</span><span>mno</span><span>pqr</span> <span>stu</span> <span>vwx</span> <span>yzz</span>
</div>
<div>
<span>abc</span> <span>def</span> <span>ghi</span><span>jkl</span><span>mno</span><span>pqr</span> <span>stu</span> <span>vwx</span> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper elementum imperdiet. Suspendisse commodo sollicitudin nulla et interdum. Nulla consequat suscipit mauris quis blandit. Nullam scelerisque elementum risus. Integer nulla turpis, venenatis at auctor vel, porttitor at tellus. Nulla facilisi. Aenean varius tristique nisl vitae ultrices. Nullam in tellus tempus, ornare metus ac, dapibus sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam eleifend nibh hendrerit varius gravida. Praesent condimentum lorem in augue laoreet sagittis. Ut in mi et justo rhoncus feugiat. Vestibulum consequat, neque nec ullamcorper suscipit, felis massa dignissim erat, nec imperdiet velit sapien eu neque. In hac habitasse platea dictumst. Maecenas mi risus, venenatis vitae hendrerit a, ultrices sit amet ipsum. Curabitur laoreet diam non dolor ultricies, nec vehicula orci vestibulum.</span>
</div>
</div>
</div>
CSS
.wrap {
width: 350px;
height: 145px;
border: thin solid;
overflow: hidden;
-webkit-column-count: 1;
-webkit-column-width: 100%;
-moz-column-count: 1;
-moz-column-width: 100%;
column-count: 1;
column-width: 100%;
}
.one {font-size: 2em;}