JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="wrap1">
        <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>yzz</span>
            </div>
        </div>
    </div>
</div>

CSS

.wrap {
    width: 350px;
    height: 145px;
    border: thin solid;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: clip;
    -webkit-column-count: 1;
    -webkit-column-width: 100%;
    
    -moz-column-count: 1;
    -moz-column-width: 100%;
    
    column-count: 1;
    column-width: 100%;
}

.wrap1 {
    width: 200%;
    height: inherit;
    -webkit-column-count: 2;
    
    -moz-column-count: 2;
    -moz-column-fill: auto;
    
    column-count: 2;
    column-fill: auto;
}

.one {
    font-size: 2em;
}