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;
  vertical-align: top;
}

.redHide {
  display: inline-block;
  height: 100px;
  width: 0px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.redShow {
  background-color: red;
  display: inline-block;
  height: 100px;
  width: 100px;
  transition: 2s width ease-in;
}

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

JavaScript

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