I am trying to create a card flip using vanilla CSS and Js using the &. selector to target an element that also includes the parent as a compound selector.

There is an example here which is using stylus…
https://codepen.io/colebemis/pen/WNKdNj?editors=1111

I have tried to simplify the example that uses only vanilla CSS & JavaScript here…
https://codepen.io/dickkirkland/pen/JjVwJdB

In my attempt to flip the card the 2 <div>s aren’t as seamless and seem to flip independently vs. the first example where the card visually looks just like one card with a front and a back.

Is the JavaScript in my example firing too fast or does the nesting with &.flipped have to be included so that the animation will be seen as 1 card?

I can’t seem to use or the Codepen editor won’t allow me to use the direct &. approach with plain CSS.

Is there a a different way to achieve this animation?
Any advice or insight would be greatly appreciated.