JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>1 small</li>
    <li>1 wide wide wide wide wide wide</li>
</ul>
<ul>
    <li>2 medium medium</li>
    <li>2 small</li>
</ul>
<ul>
    <li>3 small</li>
    <li>3 wide wide wide wide wide wide</li>
    <li>3 medium medium</li>
</ul>

CSS

ul {
    margin: auto;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
}
li {
    background: green;
    margin: 1px;
    flex-grow: 1;
    flex-basis: 0;
}

@media screen and ( max-width: 500px ) {
    ul { flex-direction: column; }
    li { flex-basis: auto; }
}