This is a JavaScript practice with JavaScript30 by Wes Bos without any frameworks, no compilers, no boilerplate, and no libraries.
view demo here
CSS flex, toggle(), includes(), transitionend
there are bunch of articles about CSS flexbox layout, and I hightly recommend this one written by Chris Coyier on CSS-Tricks if you are new to this fearture.
Safari transitionend event.propertyName === flex */
Chrome + FF transitionend event.propertyName === flex-grow */
due to there are different words between browsers, so we use .includes() to find the key word 'flex' here, for matches them.
if (e.propertyName.includes('flex')) {
this.classList.toggle('open-active');
}