JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="society">
  <div class="parent">
     parent
    <div class="child">
      child
    </div>
  </div>
</div>

CSS

.society {
  padding:10px;
  background-color:green;
  position:relative;
}

.parent {
  background-color:red;
  width:60%;
  margin-left:30%;
}

.child {
  width: 100%;
  background-color:pink;
  position:absolute;
  top:0;
  left:0;
  width:0;
  max-width:0px;
  max-height:0px;
  transition: max-width 1s, max-height 1s;
  overflow:hidden;
}

.child.selected {
  top:0;
  left:0;
  width:100%;
  max-width:1000px;
  max-height:1000px;
}

JavaScript

var child = document.querySelector('.parent').addEventListener('click',function(e){
	e.stopPropagation();
  $(this.querySelector('.child')).toggleClass('selected');
  console.log(e);
},false);