JSFiddle - React, Tailwind, and code Playground

by Greg Bowler

HTML

<input type="checkbox" id="thing" />
<label for="thing">Click me</label>

<div>
  <p>
  The 1st Battalion of Nevada Volunteer Cavalry, or the Nevada Territory Cavalry Volunteers, was a unit raised for the Union army during the American Civil War. It remained in the west, garrisoning frontier posts, protecting emigrant routes, and engaged in scouting duties. The unit was disbanded in July 1866.

  </p>
</div>

CSS

html, body {
  width: 20rem;
  height: 100%;
}

div {
  max-height: 0;
  
  overflow: hidden;
  box-sizing: border-box;
  border: 2px solid red;
  background: white;
  transition: max-height 1s;
}

:checked~div {
  max-height: 100%;
}

@keyframes appear {
  from {
    max-height: 0px;
  }
}