JSFiddle - React, Tailwind, and code Playground

by Optimix

HTML

<div class="text" contentEditable="true">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus veritatis eius sapiente facilis necessitatibus porro a vitae alias, dolorem impedit earum quisquam voluptas omnis ipsam saepe, deserunt quod minus incidunt.
  
</div>
<button id="button">Click</button>

CSS

.text {
  background: green;
  color: #fff;
  transition: min-height .3s ease-in-out;
  min-height: 0px;
  overflow: auto;
  display: none;
}

.max {
  transition: min-height .3s ease-in-out;
  //height: 200px;
  min-height: 200px;
  display: block;
}

JavaScript

document.querySelector('#button').addEventListener('click', function() {
  document.querySelector('.text').classList.toggle('max');
});