Card flip animation in flexbox layout - css

Question

I have a two-part issue. First, I'm struggling to implement a card flip animation to cards in an existing flexbox grid layout since all of the solutions I've come across apply position: absolute on the cards, which breaks the layout and makes the rows overlap each other as they have almost no height. I also can't manually set the heights as it's based on variable content/viewports.
Secondly, I also can't get the animation itself working. I'm going for CSS approach triggered in jQuery. I tried the plugin jQuery Flip, but that also had the positioning issue.
Basically, I'm looking for a card flip animation solution that doesn't need the cards to be set to position: absolute, or does, but allows for multiple rows that don't have a fixed height. I don't mind using jQuery.
CSS:
.events-row {
display: flex;
justify-content: space-between;
margin: 0 auto;
max-width: 1280px;
}
.card {
flex-basis: 31.3%;
position: relative;
padding: 15px 0;
}
.card .card-flip-cont {
padding: 15px;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
.card .card-front,
.card .card-back {
position: absolute; /* Need to get rid of */
-webkit-backface-visibility: hidden;
}
.card .card-back {
-webkit-transform: rotatex(-180deg);
}
.card-flip-cont .card-flipped {
-webkit-transform: rotatex(-180deg);
}
Layout:
<div class="events-row">
<div class="card">
<div class="card-flip-cont">
<div class="card-face card-front">
<div class="card-img four-three-img">
<img src="http://i.imgur.com/gsnJi.jpg" />
</div>
<div class="card-info">
<h2>Event title</h2>
<h3>Event date</h3>
<h3>Event venue</h3>
<p>
Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
</p>
<div class="button-cont">
<div class="button purple-button">Buy Tickets</div>
</div>
</div>
</div>
<div class="card-face card-back">
<div class="card-img four-three-img">
<img src="http://i.imgur.com/gsnJi.jpg" />
</div>
<div class="card-info">
<h2>Event title2</h2>
<h3>Event date2</h3>
<h3>Event venue2</h3>
<p>
Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
</p>
<div class="button-cont">
<div class="button purple-button">Buy Tickets</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
jQuery:
$('.card-front .button').on('click', function() {
$(this).parents('.card-flip-cont').addClass('flipped');
});
Demo: http://codepen.io/ourcore/pen/oBeXzq