Embedding a link into a div

I've hacked together some code to create a card flipping effect: https://www.meridianacademy.org/test-4

When I add a <a href> tag to the text on the back of a card it causes an odd break in the text. This can be seen if you click on the first card and also in the uploaded image.

Any thoughts on how to fix this?

 because display: flex in .flipper-back

try changing to display: block

thanks @tuanphan but when you do that it bumps all the text to the top of the card as opposed to keeping the text centered (see photo or page). is there a way to have it both ways?