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: flex;
    flex-flow: row wrap;
    
    margin: 0;
    padding: 0;
    
    list-style: none;
}

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

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

li.wide {
    width: auto;
    
    flex-grow: 1;
}

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