JSFiddle - React, Tailwind, and code Playground

HTML

<div class="el1">
  Hi diddly ho neighborino!!
  <div class="el2">
    <p>Shut up Flanders!!</p>
    <p>Okely Dokely Do!!</p>
  </div>
</div>

CSS

html,body{
  font:16px "Trebuchet MS";
  margin:0;
  padding:0;
}

.el1{
  padding:10px;
  height: 20px;
  background:#eee;
  overflow:hidden;
  transition: height .5s;
}

.el2{
  position:relative;
  padding-top: 1px;
  margin-top: -1px;
  padding-bottom: 1px;
  margin-bottom: -1px;
}

JavaScript

$(".el1").click(function(){
  var originalHeight = $(this).outerHeight(true);
  
  console.log(originalHeight);
  if(!$(this).hasClass("expanded")){
    $(this).addClass("expanded").css("height","+="+$(this).children().outerHeight(true)+"px");
  } else {
    $(this).removeClass("expanded").css("height","20px");
  }
});