JSFiddle - React, Tailwind, and code Playground

HTML

<div> This stays where it was</div>
<div class='uWrapper'>
    <div class='wrapper'>
        <div class='growIt'>Text for div</div>
    </div>
</div>
<div> Stuff to move out of the way</div>    
<input type='button' id='showHide' value='Show / Hide'/>

CSS

.uWrapper{
    position:relative;
}
.wrapper{
    position:relative;
    width:200px;
    height:200px;
    bottom:0px;
    overflow:hidden;
    display:none;
}
.growIt{
    background: red;
    position:relative;
    width:200px;
    height:200px;
    top:200px;
    left:200px;
    display:block;
}

JavaScript

$(function(){
    var hiding = true;
    $('#showHide').click(function(){
        if(hiding == true){
            hiding = false;
            $('.wrapper').slideDown(2000);
            $('.growIt').animate({top:'0px',left:'0px'},2000);    
        }else{
            hiding = true;
            $('.wrapper').slideUp(2000);
            $('.growIt').animate({top:'200px',left:'200px'},2000);    
        }
    });
    
});