JSFiddle - React, Tailwind, and code Playground

by acturbo

HTML

<div class="mediaHolder">

   <div class="greyBox">
    <p style="color: #000;font-size: 10px;text-align:center;opacity: 0;">Example text</p>
    </div>
   <div class="redBox">

    </div>
  </div>

CSS

.mediaHolder{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;

}
.greyBox{
    float: left;
    width: 60px;
    height: 15px;
    background-color: #bbb;
    margin-left: 20px;
    

}
.redBox{
    
    float: left;
    width: 60px;
    height: 15px;
    background-color: #8c3b3b;
    margin-left: 20px;
    
}

JavaScript

// animate from bottom up
// leaves sibling divs alone by animating their margintop 

$('.greyBox').mouseenter(function(){
   
   $(this).animate({height:'50px'},700).children('p').animate({opacity:1},1200);
       // height is 15 .... 50-15 = margin of 35
      // try commenting out to see bad side effect
       $(this).siblings().animate({marginTop: '35px'}, 700)
    
   });