JSFiddle - React, Tailwind, and code Playground

by Carlos Filoteo

HTML

Simple: These are OK
<div>
    <div>
        <div>cell lorem ipsum</div>
    </div>
</div>
<div>
    <div>
        <div>cell lorem ipsum</div>
        <div>cell lorem ipsum</div>
    </div>
    <div>
        <div>cell lorem ipsum</div>
        <div>cell lorem ipsum</div>
    </div>
</div>
<div>
    <div>
        <div>cell lorem ipsum</div>
        <div>cell lorem ipsum</div>
        <div>cell lorem ipsum</div>
    </div>
    <div>
        <div>cell lorem ipsum</div>
        <div>cell lorem ipsum</div>
        <div>cell lorem ipsum</div>
    </div>
</div>

Problem:
Placing an additinal <code>div.cell</code> in another 'row' will not span across to fit with the above cells.
<div>
    <div>
        <div>cell 1</div>
        <div>cell 2</div>
        <div>cell 3</div>
    </div>
    <div>
        <div>I will not span :(</div>
    </div>
</div>
Problem: placing a single cell in the top row and having two in the next causes this hotfix to break.
<div>
    <div>
        <div>Squished?</div>
    </div>
    <div>
        <div>cell 1</div>
        <div>cell 2</div>
    </div>
</div>

Solution: A complex layout simply just needs additional tables instead of multiple row in a single table
<div class="table">
    <div class="row">
        <div class="cell">Lorem ipsum dolor sit amet viverra</div>
    </div>
</div>

<div class="table">
    <div class="row">
        <div class="cell">consectetur </div>
        <div class="cell">adipiscing</div>
    </div>
</div>
<div class="table">
    <div class="row">
        <div class="cell">elit</div>
        <div class="cell">aenean </div>
        <div class="cell">congue </div>
    </div>
</div>
<div class="table">
    <div class="row">
        <div class="cell cell-60">hendrerit placerat</div>
        <div class="cell">orci</div>
    </div>
</div>
<div class="table">
    <div class="row">
        <div class="cell">eget </div>
        <div class="cell cell-60">arcu dolor aliquam</div>
    </div>
</div>
<div class="table">
    <div...

CSS

div {
    display: table;
    width: 250px;
    table-layout: fixed;
    margin-bottom: 20px;
}

div > div {
    display: table-row;
}

div > div > div {
    display: table-cell;
    border: 1px dotted red;
    padding: 4px 6px;
    width: 2%;
    margin-bottom: 0;
}

.table {
    display: table;
    width: 250px;
    table-layout: fixed;
    margin-bottom: 0;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
    border: 1px dotted blue;
    padding: 4px 6px;
    width: 2%;
    margin-bottom: 0;
    text-align: center;
}
.cell-60{
    width: 10%;
}
.cell-80{
    width: 20%;
}