CSS: transition from pixels to auto
I knew that I can set height to auto and the DOM element will enlarge to show the content in it. However this will not work good with transitions. That's because the browser needs numbers to calculate the animation. The problem is illustrated in the following jsfiddle
The solution of the problem is to use max-height instead of height. I.e. when the column is slided down I had to set max-height to a very big value and the element will stretch. Here is an example following this approach:
Of course the problem is not completely solved, because the animation is too fast or too slow. This depends on the content. Anyway, it looks good in my case, it's not buggy and it's only (almost) CSS.