JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="conteneur"><a><p>Texte 1</p></a></li>
    <li class="conteneur"><a><p>Texte 2 Long Sur 2 Lignes</p></a></li>
    <li class="conteneur"><a><p>Texte 3</p></a></li>
    <li class="conteneur"><a><p>Texte 4</p></a></li>
</ul>

CSS

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
ul li {
    display: inline;
    position: relative;
    float: left;
    height: 50px;
    line-height: 50px;
}
ul li a {
    background-color: #0099cc;
    color: #fff;
    display: block;
    padding: 0 7px 3px 7px;
    margin-right: 2px;
    text-decoration: none;
    width: 95px;
}
ul li a p {
    vertical-align: middle;
    display: inline-block;
    line-height: 1em;
    margin: 0;
}