JSFiddle - React, Tailwind, and code Playground

by j2mm

HTML

<div class="table">
    <div class="row hidden">
        <div class="cell"></div>
        <div class="cell-centered">fixed width 600px; row in yellow just to show cell alignment, actually goes "hidden"</div>
        <div class="cell"></div>
    </div>
    <div class="row">
        <div class="cell">
        </div>
        <div class="cell-fixed"><div class="fixed"><br>fixed width 200px<br><br></div></div>
        <div class="cell relative">
            <div class="outer absolute"><div class="inner absolute">100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100%</div></div>
        </div>
    </div>
</div>
<div class="container"></div>

CSS

body {margin: 0; text-align: center;}

.table {width: 100%; position: fixed; top: 50px;}
.row {display: table-row;}
.cell {
    background: #ccc;
    display: table-cell;
    width: 50%;
}
.cell-centered {
    background: #aaa;
    display: table-cell;
    min-width: 600px;
}
.cell-fixed {
    background: #bbb;
    display: table-cell;
    min-width: 200px;
}
.fixed {
    background: #1dcf53 ;
    width: 200px;
}
.hidden .cell {background: #f0ff00 ;}
.hidden .cell-centered {background: #e0ee00;}
.relative {position: relative;}
.absolute {position: absolute;}
.outer {
    width: 100%;
    padding-right: 400px;
    right: 0;
}
.inner {
    background: #1dcfa6;
    width: 100%;
    right: 0;
}

.container {
    background: #eee;
    width: 600px;
    height: 300px;
    margin: auto;
}