JSFiddle - React, Tailwind, and code Playground

HTML

<div id="frame">
	<div id="top">top</div>
	<div id="middle">middle</div>
    <div id="bottom">bottom<br>bottom<br>bottom<br>bottom</div>
</div>

CSS

#frame{
		position: absolute;
        top:30px;
		left:30px;
        margin:30px;
		border-style: solid;
		border-width: 1px;
		width:200px;
		height:200px;
	}

	#middle{
		width:200px;
		height:200px;
		position: absolute;
		top:0px;
	}

	#top{
		display:none;
        position:absolute;
		background-color:red;
		width:100%;
        bottom:300px;
	}

	#bottom{
		position:absolute;
		display:none;
		top:300px;
		background-color:red;
		width:100%;
	}

JavaScript

$('#middle').click(function () {
    $('#middle').animate({'top':'19px'});
    $('#frame').animate({
        'height':$(this).height()+$('#bottom').height()+20,
        'top':$(this).offset().top-20
	},function(){
	    $('#top').slideDown();
		$('#bottom').slideDown();
	});		
});