JSFiddle - React, Tailwind, and code Playground

by jonnyc

HTML

<div class="parent">
    <ul class="menu">
        <li>this</li>
        <li>width</li>
        <li>is</li>
        <li>dynamic.</li>
    </ul>

    <div class="something">
        <table border="1">
            <tr>
                <td>so is this because of this table</td>
            </tr>
        </table>
    </div>

    <div class="fill">
        <span>this needs to fill the rest</span>
    </div>
</div>

CSS

ul, li { margin: 0; padding: 0; }

div.parent { border: 1px dashed #000;display:table; width: 600px; height: 30px; }

ul.menu, div.something, div.fill {display:table-cell;}
ul.menu, div.something{width:30%;white-space:nowrap}

ul.menu { background: #CCC; margin: 0 5px 0 0; }
ul.menu li { background: #DDD; display: inline-block; }

div.something {margin: 0 5px 0 0; }
div.fill { background: #390; }