JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">

    <div id="column-wrapper">
        
        <div class="column">
            <span>1</span>
        </div>
        
        <div class="column">
            <span>2</span>
        </div>
        
        <div class="column">
            <span>3</span>
        </div>
        
        <div class="column">
            <span>4</span>
        </div>
        
         <div class="column">
            <span>5</span>
        </div>
        
         <div class="column">
            <span>6</span>
        </div>
        
    </div>
    
</div>

CSS

#container {
    position: relative;
    width: 600px;
    overflow: hidden;
}

#column-wrapper .column {
    background-color: green;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    padding: 20px;
}

.column {float: left; width: 140px;}
.column:nth-child(3n+2) {margin: 0 20px;}
.column:nth-child(3) ~ .column {margin-top: 20px;}