JSFiddle - React, Tailwind, and code Playground

by Robert

HTML

<table>
            <tr><td style="height:50px;background-color:blue"></td></tr>
            <tr><td style="height:200px;background-color:grey;">
                <div style="height:100%">
                    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
                    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
                    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
                    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
                    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
                    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
                    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
                </div>
            </td></tr>
            <tr><td style="height:50px;background-color:green"></td></tr>
        </table>

CSS

div {
    overflow: auto;
}

table {
    width: 100%;
    border-collapse: collapse;

    overflow: hidden;
    white-space: nowrap;
    table-layout: fixed;
}
td {
    border: 1px dotted black;
    vertical-align: top;
    white-space: nowrap;