JSFiddle - React, Tailwind, and code Playground

by ryanwheale

HTML

<ul style="width:16em;list-style:none;padding-left:0">
    <li><label>name:</label><span>whatever</span></li>
    <li><label>categories:</label>
        <ul class="flat"><li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
            </ul>
   </li>
</ul>

CSS

.flat {list-style:none; padding: 0; margin: 0;}
.flat li {float: left; width: 50%;}

label:first-child {
    background: #eef;
    float: left;
    width: 7em; /* magic number: 9 + 7 = 16 */
}

label:first-child + * {
    float: left;
    background: #fee;
    width: 9em; /* magic number: 9 + 7 = 16 */
}