JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <div id="child">
        Lorem Ipsum Dolor Set Something Or Other...
    </div>
</div>
<button id="open">Open</button>
<button id="close">Close</button>

CSS

#parent {
    overflow: hidden;
    height: 0px;
}

#child {
    background-color: gray;
    height: 100px;
    margin-top: -100px;
}

JavaScript

$('#open').click(function(){
    $('#parent').animate({ height : '100px' });
    $('#child').animate({ marginTop : '0px' }); 
});

$('#close').click(function(){
    $('#parent').animate({ height : '0px' });
    $('#child').animate({ marginTop : '-100px' }); 
});