JSFiddle - React, Tailwind, and code Playground

HTML

<head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   </head>
   <body>
      <div class="hidden">Here I am !</div>
      <div class="left">Left panel</div>
      <div class="right">Right panel</div>
      <div class="clear"></div>
      <a href="#" id="slide">Show/hide Slide Panel</a>
   </body>

CSS

.left,
.hidden {
    float: left;
    height: 350px;
}

.left {
    width: 50%;
    background: #fff;
    z-index: 1;
}

.hidden {
    width: 25%;
    z-index: 2;
    position: absolute;
    left: -1000px;
    background: #f90;
    color: #000;
}

.right {
    width: 50%;
    float: right;
    height: 350px;
    background: #000;
    color: #fff;
}

.clear {
    clear: both;
}

JavaScript

$(document).mouseup(function (e)
     {
        var container = $('.hidden');
    
        if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0) // ... nor a descendant of the container
        {

          $('.hidden').css('left', '0');
        }
    });