JSFiddle - React, Tailwind, and code Playground
HTML
<div id="outer"></div>
<div id="inner"></div>
CSS
#outer {
z-index: 2;
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: -50px;
background-color: red;
}
#inner {
background-color: blue;
position: absolute;
z-index: 1;
top: 10px;
height: 80px;
width: 80px;
left: -80px;
transition:left .5s;
-moz-transition:;left .5s;
-webkit-transition:left .5s;
}
JavaScript
var under = true;
$("#outer").bind({
click : function() {
if(under){
$("#inner").css({
left: 50,
});
}
else{
$("#inner").css({
left: -50,
});
}
under = !under;
}
});