JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<div class="wrapper">
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="column first"></div>
        <div class="column middle"></div>
        <div class="column"></div>
    </div>
    <div class="contents">
        <div class="container-fluid">
            <div class="cell">Hello</div>
            <div class="cell">There</div>
            <div class="cell last">Boom</div>
        </div>
        <div class="container-fluid"></div>
    </div>
</div>

CSS

.wrapper {
    border: solid 1px #000000;
    border-radius: 2px;
    padding: 2px;
    height: 400px;
    display: table;
    margin: 2px;
}
.navbar-fixed-top {
    margin: 20% auto 0px auto;
}
.contents {
    display: table-row-group;
    margin: 3px;
}
.navbar {
    border: solid 1px #000000;
    border-radius: 1px;
    padding: 2px;
    display: block;
    width: 30%;
}
.first {
    width: 200px;
    border: solid 1px #000000;
}
.middle {
    width: 120px;
}
.last {
    overflow: scroll;
    height: 400px;
    position: absolute;
    width: 120px;
}
.navbar-default {
    display: table-column-group;
}
.column {
    display: table-column;
    margin: 1px 3px;
}
.multi {
    display: table-row;
}
.container-fluid {
    display: table-row;
    border: solid 1px #000000;
}
.cell {
    display: table-cell;
    border: solid 1px #000000;
}