JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">

<div id='black'>
    <div class='content'> Listen Now</div>
</div>

<div id='red'>
    <div class='content'>    Watch Videos</div>

</div>
    </div>

CSS

#black{
    width:80px;
    height:30px;
    background-color:black;
    float:left;
        color:white;

    
}

.content{
        margin-top: 5px;
padding-left: 5px;
}

#red{
           
     
margin-top: 0px;
    width:0px;
    height:30px;
    background-color:red;
    float:left;
    overflow:hidden;
  line-height: 10px;
     
}
#container{
    background-color:gray;
    cursor:pointer;
    height:100px;
}

JavaScript

$('#container').mouseover(function(){
$('#red').stop(true,true).animate({ width: '110px'}, 100);
})
 $('#container').mouseout(function(){
$('#red').stop(true,true).animate({ width: '0px'}, 100);
})