JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="row">
        <div class="col" style="height: 900px; background-color: blue;"></div>
        <div class="col" style="height: 500px; background-color: red;"></div>
        <div class="col" style="height: 200px; background-color: orange;"></div>
        <div class="col" style="height: 600px; background-color: yellow;"></div>
        <div class="col" style="height: 300px; background-color: green;"></div>
        <div class="col" style="height: 400px; background-color: purple;"></div>
    </div>
</div>

CSS

.container { width: 100%; }
.col { 
    float: left; 
    width: 50%; 
    box-sizing: border-box; 
    border: 0 solid rgba(0,0,0,0);
    border-left-width: 18px;
    background-clip: padding-box;
}