JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="container">
    <li class="item">
        <a href="." class="inner">A<br />B</a>
    </li>
    <li class="item">
        <a href="." class="inner">A</a>
    </li>
    <li class="item">
        <a href="." class="inner">A<br />B<br />C</a>
    </li>
</ul>

CSS

.container {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}
.item {
    display: -webkit-flex;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    -o-flex: 1;
    flex: 1;
    background-color: blue;
    border: 5px solid orange;
}
.inner {
    display: block;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    -o-flex: 1;
    flex: 1;
    background-color: red;
    border: 2px solid purple;
}