How to make a smooth increase/decrease in height depending on the display of vue content?

Question

Vue.js

Here, for example, pen, how can I make the height of the parent block smoothly increase and decrease when hiding / showing content?

Answer 1

Elementary, I threw those on my knee:

Only it does not take into account a bunch of all sorts of edge-cases, the most obvious: changes in the width in the process of work - you should add another wrapper and ResizeObserver.
But there are also a lot of non-obvious ones, so ready-made libs are usually used for such things.)