JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <ul class="column">
    <li class="square"></li>
    <li class="square2"></li>
    <li class="square"></li>
    <li class="square2"></li>
    </ul>
    <ul class="column">
    <li class="square2"></li>
    <li class="square"></li>
    <li class="square2"></li>
    </ul>
</div>

CSS

body {
    background-color:darkred;
}

#container {
    width:650px;
    position:relative;
    margin:0 auto;
}

.column {
    width:300px;
    float:left;
    margin-right:10px;
}

.square {
    display:block;
    width:100%;
    height:150px;
    border:1px solid white;
    margin-bottom:10px;
}

.square2 {
    display:block;
    width:100%;
    height:450px;
    border:1px solid white;
    margin-bottom:10px;
}