JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cheetah">
   <p><a href="#">Cheetah</a></p>
     <div>Mmmmmmm</div>
</div>
<div id="hidden">
    <li>dfsdfsdfsdfsdfsdf</li>
   
</div>

CSS

#cheetah {
    background-color: red;
    color: yellow;    
    position: relative;
}

a {
    color: blue;
}

#hidden {
    height: 0px;
    background:orange;
    overflow: hidden;
 }

#cheetah div {
    position: absolute;
    right: 0;
    top:0;
    display: none;
    background: blue;
    width: 100px;
}

#hidden li {
  width: 50px;
}

JavaScript

$("#cheetah a").hover(
        function () {
             $('#hidden').animate({
                height:"50px"
            }, 500);
            $('#cheetah div').fadeIn(500);
        },
        function () {
              $('#hidden').animate({
                height:"0px"
            }, 500);
             $('#cheetah div').fadeOut(500);
        }
    );