JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
    <li>
        <a href="#">One line</a>
    </li>
    <li>
        <a href="#">Two lines that should wrap</a>
    </li>
    <li>
        <a href="#">Another two lines that should wrap</a>
    </li>
    <li>
        <a href="#">One line</a>
    </li>
</ul>
<br style="clear: both" />

CSS

#menu {
    margin: 0; padding: 0;
    list-style: none;
    font-size: 12px;
}
    #menu li {
        margin: 0;
        padding: 0;
        list-style: none;
        background: red;
        width: 120px;
        height: 47px;
        line-height: 47px;
        float: left;
        border-right: 1px solid #fff;
        text-align: center;
        padding-bottom: 3px;
    }
        #menu li a {
            color: #000;
            text-decoration: none;
            display: -moz-inline-box;
            display: inline-block;
            line-height: 14px;
            vertical-align: middle;
        }
        #menu li a {
            
        }