JSFiddle - React, Tailwind, and code Playground

HTML

<h3> height: auto; animation </h3>

<div class="hello">
	Hello, World! Hello, World! Hello, World! <br>
	Hello, World! Hello, World! Hello, World! <br>
	Hello, World! Hello, World! Hello, World! <br>
	Hello, World! Hello, World! Hello, World! <br>
	Hello, World! Hello, World! Hello, World! <br>
	Hello, World! Hello, World! Hello, World! <br>
</div>
<button id="show_button">Show</button>
<button id="hide_button">Hide</button>

<h3> height: 150px; animation </h3>

<div class="hello2">
	Hello, World! Hello, World! Hello, World! <br>
	Hello, World! Hello, World! Hello, World! <br>
	Hello, World! Hello, World! Hello, World! <br>
	Hello, World! Hello, World! Hello, World! <br>
	Hello, World! Hello, World! Hello, World! <br>
	Hello, World! Hello, World! Hello, World! <br>
</div>
<button id="show_btn">Show</button>
<button id="hide_btn">Hide</button>

<h3> Notes </h3>

<p> I <u>must</u> animate height to auto, because the content of the div will <u>change often</u>. </p>

CSS

.hello {
	height: 0px;
	overflow: hidden;
	transition: height 2s;
}

.hello.animate {
	height: auto;
}

.hello2 {
	height: 0px;
	overflow: hidden;
	transition: height 2s;
}

.hello2.animate {
	height: 150px;
}

JavaScript

var element = document.querySelector(".hello");
var elem = document.querySelector(".hello2");

function show()
{
	element.classList.add("animate");
}

function hide()
{
	element.classList.remove("animate");
}

function show_content()
{
	elem.classList.add("animate");
}

function hide_content()
{
	elem.classList.remove("animate");
}

show_button.onclick = show;
hide_button.onclick = hide;
show_btn.onclick = show_content;
hide_btn.onclick = hide_content;