JSFiddle - React, Tailwind, and code Playground

HTML

<table id="bayan">
    <tr>
        <td>
            <div><p>раз</p></div>
        </td>
        <td>
            <div><p>два</p></div>
        </td>
        <td>
            <div><p>три</p></div>
        </td>
        <td>
            <div><p>четыре</p></div>
        </td>
    </tr>
</table>

CSS

#bayan { width: 100%; table-layout: fixed; }
#bayan td { background: #ccc; width: 3%; padding: 0; overflow: hidden; }
#bayan div { padding: 20px 200px; }

JavaScript

$("#bayan td").hover(
    function(){$(this).animate({width: '91%'},500);},
    function(){$(this).animate({width: '3%'},500);}
);