Check out my demo here
This demo features a simple app with four buttons and a text area.
Each button click loads different text, which varies in length and causes the grey container to adjust its height accordingly.
I'm wondering if it's possible to add animations to the grey box as the text content changes in height?
const [text, setText] = useState(textArr[3])
return (
<div>
<div className="nav">
<button onClick={() => setText(textArr[0])}>
One
</button>
<button onClick={() => setText(textArr[1])}>
Two
</button>
<button onClick={() => setText(textArr[2])}>
Three
</button>
<button onClick={() => setText(textArr[3])}>
Four
</button>
</div>
<div className="text">
{text}
</div>
</div>
);