JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="back">This is fixed.
    <div id="up">
        <p>This should slide.</p>
     </div>
  </div>
</body>

CSS

#back
        {
            background:#CCCCCC;   
            width:200px;
            height:110px; 
        }
        
        p
        {
            text-decoration:none;
            cursor:pointer;
        }
        p:hover
        {
            text-decoration:underline;
        }
        #up
        {
            background:#000000;
            opacity:0.8;
            width:200px;
            height:5px;
            position:absolute;
            color:#dedede;
            top:115px;
        }

JavaScript

$(document).ready(function(){
            
        
            $('#back').hover(function(){ 
                $('#up').stop().animate({    
                    height:'50px',
                    marginTop:'-45px'
                },1000); 
            },function(){
                $('#up').stop().animate({    
                    height:'5px',
                    marginTop:'0px'
                },1000);
            });
           });