JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="wrapinner">
        <div class="result">
            <div class="title">1</div>
            <div class="postcontent"><p>Test</p></div>
        </div>
    </div>
    <div class="wrapinner">
        <div class="result">
            <div class="title">2</div>
            <div class="postcontent"><p>Test</p></div>
        </div>
    </div>
    <div class="wrapinner">
        <div class="result">
            <div class="title">3</div>
            <div class="postcontent"><p>Test</p></div>
        </div>
    </div>
    <div class="wrapinner">
        <div class="result">
            <div class="title">4</div>
            <div class="postcontent"><p>Test</p></div>
        </div>
    </div>
    <div class="wrapinner">
        <div class="result">
            <div class="title">5</div>
            <div class="postcontent"><p>Test</p></div>
        </div>
    </div>
    <div class="wrapinner">
        <div class="result">
            <div class="title">6</div>
            <div class="postcontent"><p>Test</p></div>
           </div>
    </div>
    <div class="wrapinner">
        <div class="result">
            <div class="title">7</div>
            <div class="postcontent"><p>Test</p></div>
           </div>
    </div>
    <div class="wrapinner">
        <div class="result">
            <div class="title">8</div>
            <div class="postcontent"><p>Test</p></div>
           </div>
    </div>
    <div class="wrapinner">
        <div class="result">
            <div class="title">9</div>
            <div class="postcontent"><p>Test</p></div>
           </div>
    </div>
    
</div>

CSS

div.wrap {
    width: 100%;
    height: 300px;    
    -webkit-column-width: 100px; 
    column-width: 100px;
    -webkit-column-gap: 16px;
}

div.wrapinner {
    background: rgba(120,30,20,0.5);
}