JSFiddle - React, Tailwind, and code Playground

by allcaps

HTML

<table>
    <thead>
        <tr>
            <th rowspan="2" class="foo">
                <div class="bar">Bar</div>
            </th>
            <th>
                <div class="ni">Knight 1</div>
            </th>
        </tr>
        <tr>
            <th>
                <div class="ni">Knight 2</div>
            </th>
        </tr>
    </thead>
</table>

CSS

* { padding:0; } /* All paddings be gone! This is not a padding problem */

table { height: 1px; } /* FF needs a height */

.foo {
    background: blue; /* Don't want to see blue */
    height: 100%; /* FF needs a height agian */
}

.bar {
    background: red;
    height:100%;
    width: 100px;
    display:inline-block; /* Chrome needs inline-block, FF doesn't care. */
}

.bar:before {
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
}

.ni {
    background: gray;
    width:120px;
    height:40px;
}