JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>A</li>
    <li>A</li>
</ul>

CSS

ul {
    border: 1px solid red;
    overflow: hidden;
    display:inline-block
}

li {
    padding: 15px;
    border: 1px solid green; 
    float: left;
}

JavaScript

// I've got a ul element with a few child li elements, the li
// elements are floated to the left... is there a way for the ul
// to have the same height as the contents without floating it?