JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<body>

<div class="wrapper">
    
    <div class="inner">
        Sliding div here!! Yay!!
    </div>
</div>
    
<div class="wrapper2">
    <div class="inner2">
        Sliding div here!! Yay!!
    </div>
</div>
    
    <p>Hover over red div please!!</p>
</body>
</html>

CSS

.wrapper{
background-color:red;
    width:200px;
    height:200px;
    position:relative;
    overflow:hidden;
    color:white;
}

.inner{
    width:200px;
    height:100px;
    position:absolute;
    background-color:black;
    margin-top:200px;
color:white;
}
.wrapper2{
    background-color:blue;
    width:400px;
    height:200px;
    position:relative;
    overflow:hidden;
    color:white;
}

.inner2{
    width:200px;
    height:200px;
    position:absolute;
    background-color:black;
    margin-left:400px;
    color:white;
}

JavaScript

$(document).ready(function(){
var innerHeigth = $(".inner").outerHeight();  
$(".wrapper").hover(function(){        $(".inner").stop().animate({top:-innerHeigth},1000);
//alert(innerHeigth)
},function(){
$(".inner").stop().animate({top:0},1000);
    
});
    
$(".wrapper2").hover(function(){    
        $(".inner2").stop().animate({marginLeft:200},1000);
//alert(innerHeigth)
    },function(){
        $(".inner2").stop().animate({marginLeft:400},1000);
    });
});