JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">dsgfhghjgtyrfrdtgyftfr</div>
<div class="btn">SlideDown</div>

CSS

.main {height:0px; width:300px; background:red;color:#fff}
.btn {display:inline-block; background:#ccc; border:2px solid #666; padding:4px 5px 3px 5px; font-family:Arial; font-size:15px; cursor:pointer; position:absolute; top:230px; left:5px}

JavaScript

$(function(){
    var mainDiv = $('.main');
    $('.btn').hover(function(){
        mainDiv.stop().animate({height:'200px'},1000);
    },function(){
        mainDiv.stop().animate({height:'0px'},1000);
    });
});