JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box1">
    <button id="open" type="button">Open</button>
</div>
<div id="box2"></div>

CSS

#box1 {
      position:absolute;
      top:0;
      right:20%;
      bottom:0;
      left:0;
      background:#FF800D;
    }
    #box2 {
      position:absolute;
      top:0;
      right:0;
      bottom:0;
      left:80%;
      background:#FF045D;
    }
    button {
      position:absolute;
      bottom:50%;
      right:0;
    }

JavaScript

$(function() {
    $('#open').on('click', function() {
        $('#box1').animate({
            right: '50%'
        }, 500, function() {
            $('#open').text('Close').attr('id', 'close');
            init_me();
           
        });
    });

    function init_me(){
      $('#close').on('click', function() {
                $('#box1').animate({
                    left: '50%'
                }, 500, function() {
                    alert('done');
                });
            });   
    }
});