JSFiddle - React, Tailwind, and code Playground

HTML

<div class="up-down">
<div class="slide default"></div>
<div class="slide onhover"></div>
</div>

CSS

.up-down {
    overflow:hidden;
    height:200px;
    width:200px;
}
.slide {
    width:200px;
    height:200px;
}
.default {
    background-color:#ccc;
}
.onhover {
    background-color:#1DB7CB;
    
}

JavaScript

$(document).ready(function(){
    $('.up-down').mouseover(function(){
        $('.default').stop().animate({
            height: 0    
        }, 200);                        
    }).mouseout(function(){
        $('.default').stop().animate({
            height: 200 
        }, 200)    
    })

});