JSFiddle - React, Tailwind, and code Playground

HTML

<div class="waterfall">
    <div style="height: 100px;">1</div>
    <div style="height: 200px;">2</div>
    <div style="height: 50px;">3</div>
    <div style="height: 100px;">4</div>
    <div style="height: 200px;">5</div>
    <div style="height: 50px;">6</div>
    <div style="height: 50px;">7</div>
    <div style="height: 50px;">8</div>
</div>

CSS

.waterfall {width:302px;}

.waterfall DIV {
    min-width: 150px;
    background-color: #CCC;
    margin-top: 2px;
}
.waterfall DIV:nth-child(odd) {
    float: left;
    clear: left;
    text-align: right;
}
.waterfall DIV:nth-child(even) {
    float: right;
    clear: right;
    text-align: left;
}