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>width</li>
        <li>width</li>
        <li>width</li>
        <li>width</li>
    </ul>


    <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: 500px; height: 50px; }

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; }