JSFiddle - React, Tailwind, and code Playground

HTML

<div id="open"><span>Click</span></div>
<div id="box"></div>

CSS

#open{float: left;}
#open{ width: 50px; height: 50px; background: #000; border: 1px solid #666; border-radius: 25px; color: #fff;}
#open:hover, #box:hover{ cursor: pointer; }
#open span{ margin-left: 8px; line-height: 45px;}
#box{ position: absolute; width: 500px; height: 100px; background: #666; margin-left: -500px; }

JavaScript

$(function(){
    var visible = false,
        $open = $('#open'),
        $box = $('#box');
    
    $open.click(function () {
        visible = true;
        $box.stop(true, false).animate({marginLeft: 0}, 1000, function() {})
    });
    $box
        .mouseleave(function (){
            if(visible) {
                visible = false;
                $box.stop(true, false).animate({marginLeft: "-500px"}, 1000, function() {});
            }
        })
        .click(function (){
            if(visible) {
                visible = false;
                $box.stop(true, false).animate({marginLeft: "-500px"}, 1000, function() {});
            }                   
        })        
})