JSFiddle - React, Tailwind, and code Playground

HTML

<div style="text-align:center;" class="tab_out">
    <div class="col">
        <div class="tab_row">
            <div class="tab_in">a</div>
        </div>
        <div class="tab_row">
            <div class="tab_in">b</div>
        </div>
    </div>
    <div class="col">
        <div class="tab_row">
            <div class="tab_in">c</div>
        </div>
        <div class="tab_row">
            <div class="tab_in">d<br>d<br>d<br>d<br>d<br>d<br></div>
        </div>
        <div class="tab_row">
            <div class="tab_in">e</div>
        </div>
        <div class="tab_row">
            <div class="tab_in">f</div>
        </div>
    </div>
    <div class="col">
        <div class="tab_row">
            <div class="tab_in">g</div>
        </div>
        <div class="tab_row">
            <div class="tab_in">h</div>
        </div>
        <div class="tab_row">
            <div class="tab_in">i</div>
        </div>
        <div class="tab_row">
            <div class="tab_in">j</div>
        </div>
    </div>
</div>

CSS

.tab_out {
    display: table;
    width: 800px;
    table-layout: fixed;
    margin-bottom: 20px;
}
.col {
    display:table-cell;
}
.tab_row {
    display:table-row;
}
.tab_in {
    display: table-cell;
    border: 1px dotted red;
    padding: 4px 6px;
    width: 2%;
    margin-bottom: 0;
    vertical-align:middle;
}