JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><div>Item</div></li>
    <li><div>Item</div></li>
    <li class="wide"><div>Item</div></li>
    <li><div>Item</div></li>
    <li><div>Item</div></li>
</ul>

CSS

ul {
    display: table;
    
    width: 100%;
    
    margin: 0;
    padding: 0;
    
    list-style: none;
}

li {
    display: table-cell;
    
    width: 100px;
    
    padding-left: 5px;
}

li:first-child {
    padding-left: 0;
}

li.wide {
    width: auto;
}

li div {
    padding: 6px 12px;
    
    background: #ccc;
}

@supports (flex-wrap: wrap) {
  
    ul {
        display: flex;
        flex-flow: row wrap;
    }
    
    li {
        display: block;
    }
    
    li.wide {
        flex-grow: 1;
    }
    
}