JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>       
    </head>
    
    <body>
        
        <div id="div1" style="height:20px;">
            Test<hr />
            text text <br />
            text text <br />
            text text <br />            
        </div>
        
    </body>
</html>

CSS

body,td,th {
    font-size: 12px;
}
#div1 {
    position:absolute;
    right:30px;
    bottom:0px;
    border:1px solid #ff0000;
    overflow:hidden;
}

JavaScript

$(document).ready(function rt() {
    $("#div1").hover(

    function() {

        $('#div1').animate({
            "height": "auto"
        }, "fast");                  // <---- dont work :(

    }, function() {

        $('#div1').animate({
            "height": "20px"
        }, "fast");
    });
});