JSFiddle - React, Tailwind, and code Playground

HTML

<br />
<br />
<br />
<div id="box">
    <h1>Title Goes Here</h1>
    <p>this is the hidden text</p>
</div>

CSS

#box { height: 50px; overflow: hidden; position: relative; }
#box h1 { height: 50px; }

JavaScript

$(function() {
    $("#box").hover(function() {
        $("#box").animate({'height': '70px', 'top': "-20px"});
    }, function() {
        $("#box").animate({'height': '50px', 'top': "0px"});
    });
});