JSFiddle - React, Tailwind, and code Playground

HTML

Top<div class='div'>Content</div>Bottom


Top<div class='div'><div>Long content Content
Long content Content
Long content Content
Long content Content
Long content Content
Long content Content
Long content Content</div></div>Bottom

CSS

div.div {
   height: 50px;
    width: 300px;
    border: 1px solid black;
    overflow:hidden;
}

JavaScript

$('.div').hover(function() {
    $(this).animate({
        height: '300px'
    }, 300);
},function() {
    $(this).animate({
        height: '30px'
    }, 300);
    HasScrollBar($this);
});