JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>Un texte long</td>
        <td>Court</td>
        <td>Un moyen</td>
        <td>Court</td>
        <td>Un moyen</td>
        <td>Un texte long</td>
    </tr>
</table>
<div>
    <ul> <!-- On colle tous les li pour eviter le bug des espaces louches (white-space)-->
        <li>Un texte long</li><li>Court</li><li>Un moyen</li><li>Court</li><li>Un moyen</li><li>Un texte long</li>
    </ul>
</div>

CSS

table, tr{
    width:100%;
}

td{
    width:16.66%;
    background-color:red;
    text-align:center;
}


ul{
list-style:none;
padding-left:0;
}

li{ 
    width:16.66%;
    display:inline-block;
    background-color:yellow;
    text-align:center;
}