JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Transition</title>
    </head>
    <body>
        <div id="balancers">
          <h1>ID</h1>
          <p>Description</p>
        </div>
    </body>
</html>

CSS

#balancers {
   border: 1px solid #EEE;
   height: 30px; 
}

#balancers p {
  height: 0;
  visibility:hidden;
  opacity:0;
  transition:visibility 1s linear 0.5s,opacity 0.5s linear;
}

#balancers:hover {
    height: 60px; 
    transition:height 2s;
    -moz-transition: height 2s, -moz-transform 2s; /* Firefox 4 */
    -webkit-transition: height 2s, -webkit-transform 2s; /*Safari and Chrome */
    -o-transition: height 2s, -o-transform 2s; /* Opera */  
}

#balancers:hover > p{
  height: 0;
  visibility:visible;
  opacity: 1;
  transition-delay: 1s; 
}

JavaScript

div
{
width:100px;
height:100px;
background:red;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}