JSFiddle - React, Tailwind, and code Playground

by bryandowning

HTML

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

CSS

.waterfall {width:302px;}

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