React animate containers height

I have a demo here

Its a super simple app with four buttons and a text area.

When you click a buttons it loads different text

The text is different lengths so the grey container gets taller and shorter

Is it possible to animate the grey box when the text gets taller and shorter

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>
  );