JSFiddle - React, Tailwind, and code Playground

by Michael Gutz

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contentMask">
  <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab cupiditate debitis dolores dolorum ea, eligendi ex, expedita illum incidunt ipsum itaque neque optio quisquam quo vel veniam voluptatem voluptatibus, voluptatum.</p>
  </div>
</div>

<button id="btn">click me</button>

CSS

#content {
  background-color: yellow;
}
#contentMask {
  overflow: hidden;
  transition: height 1s ease;
}

JavaScript

var $contentMask = $('#contentMask');
var contentBoxId = '#content';
var currentHeight = getCurrentHeight(contentBoxId);
$contentMask.css('height', currentHeight);

$('#btn').on('click', function() {
  $(contentBoxId).append("<p>Ab atque aut cumque dolor exercitationem officia, perferendis quis vel. Autem deserunt ea maiores quaerat quos temporibus! Aperiam dolorem dolores, eaque ex ipsam laborum minima nesciunt nulla porro quaerat vel?</p>");
  currentHeight = getCurrentHeight(contentBoxId);
  console.log(currentHeight);
  $contentMask.css('height', currentHeight);
});

function getCurrentHeight(selector) {
 return $(selector).height();
}