JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content" class="targetDiv">Content</div>
<div class="buttons">
    <a  class="show" target="content">Show</a>
    <a  class="hide" target="content" style="float: right;">Hide</a>
</div>

CSS

.buttons {
    position: absolute;
    top:0px; 
    width: 300px;
    height: 20px;
    margin: 20px 20px 20px 20px;
    padding: 20px;
    background: #cccccc;
}

#content {
    position: absolute;
    top:0px; 
    width: 300px;
    height: 20px;
    margin: 20px 20px 0px 20px;
    padding: 20px;
    background: #ff0000;
}

JavaScript

$('.targetDiv').hide();

$('.show').click(function () {
        $('.targetDiv').hide();
        $('.buttons').animate({
            top : '80px' // the height of your content + the padding + the margins
        },'slow',function(){
        	$('#content').fadeIn('slow');
        });
});


$('.hide').click(function () {
    $('#content').fadeOut('slow',function(){
    	$('.buttons').animate({
            top : '0px' // the height of your content + the padding + the margins
        });
    });
});