JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="flyoutcontainer" class="parentflyout">
  <div class="childflyout" style="display:block;">
    <button onclick="openNewFlyout('#flyoutcontainer')">OpenNew</button>  
    <button onclick="closePanel('#flyoutcontainer')">Close</button>
  </div>
</div>

CSS

/*Temp*/
body, html{height: 100%;}
.parentflyout{
    height:100%;
}
.childflyout:nth-of-type(2){
    overflow:hidden;
}
.childflyout{
    border:1px solid black;
    width: 100px;
    float:right;
    height:100%;
    display: none;
}

JavaScript

function openNewFlyout(containerid){     
   var newFlyout = $('<div class="childflyout"></div>');
   var appended = $(containerid).prepend(newFlyout);
   newFlyout.show('slide', {direction: 'right'}, 800);
 }
function closePanel(containerid){
  $(containerid + ' .childflyout:last-of-type').remove();
}