JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.container {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}
.item {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    background-color: blue;
}
.inner {
    height: 100%;
    background-color: red;
}
.inner2 {
    height: auto;            
    background-color: orange;
}