JSFiddle - React, Tailwind, and code Playground

by soboaz

HTML

<div class="table">
    <div class="row">
        <div class="cell first">
            <div>First</div>
        </div>
        <div class="cell second">
            <div>Second</div>
        </div>
        <div class="cell third">
            <div>Third</div>
        </div>
    </div>
</div>

CSS

.table {
    display:table;
    width:100%;
    border-collapse:collapse;
}
.table .row {
    display:table-row;
}
.table .row .cell {
    display:table-cell;
    padding:5px 10px;
    border:1px solid;
}
.table .row .cell > div {
    display:inline-table;
}
.table .row .cell.first {
    text-align:left;
}
.table .row .cell.second {
    text-align:center;
}
.table .row .cell.third {
    text-align:right;
}