Css transition doesn't work backwards

Question

Requirement : I need smooth animation based on the height of the element (which is controlled by the child)

Note . Click on an item to expand

JSFiddle : https://jsfiddle.net/Lhmq0oqz/4/

What I tried: The structure of the element will look like this

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

.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;
}

<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>

Run code

Rules : On the parent element deploy only I need to show one of the child elements. The parent must have a certain maximum height in both states (collapse / expand)

, : (, ), (, ).

Answer 1

child2, ,

    .child2{
  height: 0px;
  width: 0px;
  background-color: red;
  transition:height 1s;
  }

jsFiddle

Answer 2

, css.

.parent{
  max-height: 200px;
  width: 400px;
  background-color: green;
  transition: max-height 1s ease;
  display: flex;
  overflow:auto;
}
.parent.expand{
  max-height: 400px;
}
.child1{
  width: 70%;
  height: 100px;
-webkit-transition: all 2s; /* Safari */
   transition: all 2s;
}
.child2{
  height: 0px;
  width: 0px;
  background-color: red;
-webkit-transition: all 2s; /* Safari */
   transition: all 2s;
}
.expand .child2{
  height: 800px;
  width: 30%;
}