JSFiddle - React, Tailwind, and code Playground

by Robert Herring

HTML

<ul class="container">
    <li class="l">1</li>
    <li class="l">2</li>
    <li class="l">3</li>
    <li class="r">4</li>
</ul>

CSS

* { margin: 0; padding: 0; }
li {
    background: #00f;
    color: #fff;
    text-align: center;
    list-style: none;
    border: 1px solid #f00;
    padding: 20px;
}

.container {
    display: flex;
}

.container > * {
    flex: 1 100%;
}

.l {
    padding: 20px;
    width: 40px;
}