JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="child-wrap">
    <div class="child1">
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
    </div>
    <div class="child2">
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
    </div>
  </div>
</div>

CSS

.parent {
  max-height: 200px;
  width: 400px;
  background-color: yellow;
  transition: max-height 1s ease;
  overflow: auto;
}
.child-wrap {
    width: 100%;
}
.child1 {
  width: 100%;
  background-color: green;
  transition: height 1s;
}

.child2 {
  height: 0px;
  width: 0px;
  background-color: red;
  transition: height 1s;
  
}
.parent.expand {
  max-height: 400px;
}
.expand .child-wrap{
  display:table
}
.expand .child2 {
  height: 100%;
  width: 30%;
  display: table-cell;
  
}
.expand .child1 {
  width: 70%;
  display: table-cell;
  
}
p {
  margin:0;
}

JavaScript

document.querySelector('.parent').addEventListener('click', function(eve) {
  eve.currentTarget.className.indexOf('expand') == -1 ? eve.currentTarget.className = 'parent expand' : eve.currentTarget.className = 'parent';
});