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>
        
<div>
    <ul class="test_table_cell"> 
        <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{
    width:100%;
}

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


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

*:not(.test_table_cell)>li{ 
    width:16.66%;
    display:inline-block;
    background-color:yellow;
    text-align:center;
}

.test_table_cell{
    display:table;
    width:100%;
}
.test_table_cell>li{
    background-color:pink;
    display:table-cell;
    width:16.66%;
    text-align:center;
}