JSFiddle - React, Tailwind, and code Playground

HTML

<div class=blue>
  <button class=openRed>
    Open Red
  </button>
</div>
<div class=redHide> </div>
<div class=yellow> </div>

CSS

.blue {
  width:100px;
  height: 100px;
  background-color: blue;
  display: inline-block;
}

.redHide {
    display: inline-block;
    overflow: hidden;
    position: absolute;
    height: 0px;
    max-width: 0px;
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.redShow {
    background-color: #83CCC8;
    display: inline-block;
    height: 100px;
    width: 100px;
    -moz-transition-duration: 2s;
    -webkit-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
    -moz-transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
}

.yellow {
  width:100px;
  height: 100px;
  background-color: yellow;
  display: inline-block;
}

JavaScript

$('.openRed').on('click', function (e) {
    $('.redHide').toggleClass('redShow').toggleClass('redHide');
});