Поворот на 180 градусов со сменой Div

Добрый день адепты программирования, начинающему верстальщику нужна ваша помощь!!!

1) Есть секция, в который будет контейнер (prerol), в нем будет расположено 4 прямоугольных блока (prerol-container) расположенных в один горизонтальный ряд.

Пример кода по ссылке

2) При клике на div class=prerol-button, фронтальная карточка должна поворачиваться на 180 градусов и исчезать, а обратная стороны карточки, наоборот, должна разворачиваться на нас (это как стандартный Flip Cart - только разными размерами), при этом карточка обратной стороны имеет другой размер, нежели фронтальная карточка.

3)При написании кода на jQery столкнулся с проблемой, что Фронтальный див не уходит из дома по окончании анимации (с добавленным классом), и не понял как реализовать грамотное появление оборотного дива с другим размером по ширине. Так как при установке состояния Display: block, фронтальные карты разъезжаются на ширину обратных.

Ниже прикладываю jQuery код данной проблемы! для экономии времени накидал код примера на codpen.io Пример кода по ссылке.

    var cartFront = $('.prerol-container-front')    
    var cartBack = $('.prerol-container-back')  
    $('.prerol-button').on('click', function () {       
            cartFront.addClass('animRotate');
            cartFront.on('transitionEnd', function () {
                cartFront.css('display','none');
                cartFront.removeClass('animRotate');
            })
            cartBack.addClass('animRotate');
            cartBack.on('transitionEnd', function () {
                cartBack.css('display','none');                 
            })
        })