JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <body>
    <div class="cont">
      <div class="cont2">
      </div>
    </div>
  </body>
</html>

CSS

.cont
{
  width: 500px;
  height: 300px;
  position: relative;
  border: solid 1px red;
}

.cont2
{
  border: solid 1px green;
  position: absolute;
  bottom: 0;
  height: 0;
  width: 100%;
}

JavaScript

$(function(){
	$(".cont").mouseenter(function(){
		$(".cont2").stop(true,true).animate({'height':'50px'},'slow').delay(2000)
	})

	$(".cont").mouseleave(function(){
		$(".cont2").delay(2000).animate({'height':'0px'},'slow') 
	})	
});