JSFiddle - React, Tailwind, and code Playground

HTML

<div id="back">< back</div>


<br>
<div class="phone">
    
<div class="item">item</div>
<div class="content">My content</div>
    
</div>

CSS

.content{
    display:none;
    position: absolute;
right: -200px;
top: 0px;
background: blue;
transition: 0.4s;
}

.item{
position: absolute;
left: 0;
top: 0px;
transition: 0.4s;
}

.slideRightContent{
    right: 0px;
}


.slideLeftItem{
    left: -200px;
}

#back{
    display:none;
    height: 20px !Important;
    background: grey !Important;

}

.content, .item{
    width:200px;
    height: 200px;
    background: red;
}

.phone{
  position: relative;
  overflow: hidden;
  transition: 0.4s;
   width:200px;
    border: 10px solid #000;
    height:200px;
}

JavaScript

$(function(){
    $('.item').on('click', function(){
        $(this).addClass('slideLeftItem');
        $('.content').show(0,'', function(){
            $('#back').show();
        }).addClass('slideRightContent');
    });
    
    
    $('#back').on('click',function(){
        
        $('.item').show().removeClass('slideLeftItem');
        $(this).hide();
        $('.content').removeClass('slideRightContent').once('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
            function() {
                 $(this).hide();
            });
        });
});