JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>
            <div id="content"><span>content</span></div>
        </td>
    </tr>
</table>

<input id="animate" type="button" value="animate" />
<input id="toggle2000" type="button" value="toggle(2000)" />
<input id="toggle" type="button" value="toggle" />

CSS

td {
    border: 2px solid blue;
    height: 50px;
}

#content {
    border: 2px solid red;
    width: 100px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    td {
    padding-right:2px;
    }
    span{
    left:5px;
    position:absolute;
    }
    #content {
    border: 2px solid red;
    width: 100px;
    height:20px;
    display:table;
    overflow:hidden;
    position:relative;
   }
}

JavaScript

$('#animate').click(function() { $('#content').animate({width:'toggle'}, 2000); });
$('#toggle2000').click(function() { $('#content').toggle(2000); });
$('#toggle').click(function() { $('#content').toggle(); });