I have a collapsible menu item made of 4 divs like so:

A flex container, a title div, a div that opens/closes using the below css, and a footer div.

div.mhZero {
    max-height: 0px;
}

div.mhNoMax {
    max-height: 100%;
}

.menuAnimate {
    transition: all 0.6s ease;
}

The menu is built up of a couple of these sections (each section is a react component, these components are mapped into a flex container). Each section has a bottom border seperating each menu item, that is the border of the flex column div shown above.

Whenever I open a section, the other menu items & the border of the containing div jump down, and then the menu opens using the 0.6s transition. And when I close the menu, the 0.6s transition happens and then the border and other menu items jump up. How can I have the menu items and border also transition smoothly when I open/close the menu?