JSFiddle - React, Tailwind, and code Playground

HTML

<div class="expandable">
  text
  <br />
  text
  <br/>
  text
  <br />
  text
  <br/>
  text
  <br />
  text
  <br/>
  text
</div>

CSS

.expandable {
  background-color: red;
  width: 200px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  animation-name: expand;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}

@keyframes expand {
  from {height: 0px}
  to {height: 100px}
}