JSFiddle - React, Tailwind, and code Playground
HTML
<div class="inline-block col-1">
<div class="inline-block col-1-tile">
A
</div>
<div class="inline-block col-1-tile">
B
</div>
<div class="inline-block col-1-tile">
C
</div>
</div>
<div class="inline-block col-2">
<div class="inline-block col-2-tile">
1
</div>
<div class="inline-block col-2-tile">
2
</div>
<div class="inline-block col-2-tile">
3
</div>
<div class="inline-block col-2-tile">
4
</div>
<div class="inline-block col-2-tile">
5
</div>
</div>
CSS
.inline-block {
display: inline-block;
}
.col-1 {
/* The intent behind max-width is intended
to limit the number of tiles per row
in the first column. */
max-width: 204px;
}
.col-1-tile, .col-2-tile {
margin: 5px;
border: 1px solid black;
padding: 4px;
height: 35px;
width: 80px;
}
.col-2 {
border-left: 2px solid darkred;
}