JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>
            <span>
                very very long text
                very very long text
                very very long text
            </span>
        </td>
        <td>
            <span>
                very very long text
                very very long text
                very very long text
                very very long text
                very very long text
                very very long text
                very very long text
                very very long text
                very very long text
            </span>
        </td>
        <td>
            <span>
                very very long text
            </span>
        </td>
    </tr>
</table>

CSS

table
{
    width: 300px;
    table-layout: fixed;
}
tr
{
    vertical-align: top;
    height: 100%;
}
td
{
    width: 33.3%;
    height: 100%;
}
td:nth-child(1)
{
    background-color: blue;
}
td:nth-child(2)
{
    background-color: lightgreen;
}
td:nth-child(3)
{
    background-color: magenta;
}

span
{
    background-color: yellow;
    display: inline-block;
    height: 100%;
    border-radius: 10px;
    /* position: relative; */
}