JSFiddle - React, Tailwind, and code Playground

HTML

<div id="move"></div>

<div id="up">Bring Up</div>
<div id="down">Bring Down</div>

CSS

#move {
    background: #000;
    height: 100px;
    width: 100px;
    position: relative;
}
#up {
    background: #CCC;
    height: 50px;
    width: 100px;
    line-height: 50px;
    text-align: center;
}
#down {
    background: #DDD;
    height: 50px;
    width: 100px;
    line-height: 50px;
    text-align: center;
}

JavaScript

var div = $('#move');
var upper = $('#up');
var downer = $('#down');


upper.click(function() {
	div.animate( { top: '-100'}, 500);
});
downer.click(function() {
	div.animate( { top: '0'}, 500);
});