JSFiddle - React, Tailwind, and code Playground

HTML

<button id = "animate" type="button">Animate</button>

<div id ="book-wrapper">
            
            <div id ="page-left">
               <img src="http://www.sxc.hu/pic/m/m/mi/milan6/1345644_cat_at_window.jpg"/>
            </div>
            
            <div id ="page-right">
               <img src="http://assets.dogtime.com/cel_asset/image/4f5fc5c198100a5969000064/max_300_United-airlines-bans-dog-br.jpg"/>
            </div>
            
            <div id = "flipper">
               <img src="http://img.ehowcdn.co.uk/article-new/ehow/images/a07/mv/vk/famous-tiger-characters-800x800.jpg"/>
            </div>
                
</div>

CSS

#book-wrapper 
{
    width:1000px;
    position:relative;   
}

#page-left {
    float: left;
    margin:5px;
    z-index: 1;
}

#page-right {
    float: left;
    margin:5px;
    z-index: 2;
}


#flipper{
    position:absolute;   
    z-index: 3;
    top:5px;
    left:215px;
   
   
}

JavaScript

$('#flipper').hide();

$("#animate").click(function() {
  $('#flipper').animate({width: 'slow'},2000);

});