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(){
        if(!$(this).hasClass('close')) open();
        else close();
    });
});

function open(){
    $('#box1').animate({
        right: '50%'
    }, 500, function(){
        $('#open').text('Close').toggleClass('close');
    });
}

function close(){
    $('#box1').animate({
        right: '20%'
    }, 500, function() {
        $('#open').text('Open').toggleClass('close');
    });    
}