Animating vertical stepper with Tailwind - animation

Question

I'm super close to building out an animated vertical stepper in Tailwind, however, I cannot figure out how to make the height of each individual step match the height of the content while preserving the animation! I would have thought that h-fit (instead of h-16) would do the trick, but for some reason, the animation stops working in that case.
Functioning Sandbox can be found here! https://codesandbox.io/s/still-grass-8gxu0q?file=/src/App.tsx
Would greatly appreciate any help and insight you can provide!
Here is the section of code that's giving me trouble:
<div
className={`overflow-y-hidden h-0 mt-5 transition-all ease-in-out duration-1000 flex flex-col border border-white ${
stepIdx === currentStep ? "h-16" : ""
}`}
>
<div
className={`${
isCurrent(stepIdx) ? "text-white" : "text-gray-500"
} mb-5`}
>
{step.description}
</div>
</div>
{isCurrent(stepIdx) ? (
<Buttons handleNext={handleNext} handleBack={handleBack} />
) : (
""
)}
</div>

Answer 1

I figured it out! CSS does not recommend using non-fixed heights in animations; however, the workaround is to instead use max-height.
Here's a working Sandbox in case anyone in the future needs help: https://codesandbox.io/s/still-grass-8gxu0q?file=/src/App.tsx