JSFiddle - React, Tailwind, and code Playground
HTML
<div class=flex-column id=columnContainer></div>
CSS
.flex-column {
align-content: flex-start;
border: 2px solid;
display: inline-flex;
flex-flow: column wrap;
padding: 10px 0 0 10px;
height: 220px;
width: fit-content;
}
.item {
background-color: #0072c6;
height: 100px;
margin: 0 10px 10px 0;
width: 100px;
text-align: center;
color: white;
font: 42pt/100px 'Segoe UI Light', 'Open Sans';
}
JavaScript
function $(id) {
return document.getElementById(id);
}
function createItem(index) {
var e = document.createElement('div');
e.className = 'item';
e.textContent = index;
return e;
}
function render(container, itemCount) {
for (var i = 1; i <= itemCount; i++) {
container.appendChild(createItem(i));
}
}
render($('columnContainer'), 13);