JSFiddle - React, Tailwind, and code Playground

by brazim

HTML

<div id="sidebar">
            <div id="business-left">LEFT BLOCK</div>
            <div id="business-right">[SHOULD NOT BE SEEN. BUT IS VISIBLE.]</div>
        </div>

        <div id="main">
            <div id="PL-left">[SHOULD NOT BE SEEN. AND IS CORRECTLY HIDDEN.]</div>
            <div id="PL-right">RIGHT BLOCK</div>
            
        </div>

CSS

body,html{width:100%;height:100%;padding:0;margin:0;background-color: #efefef;}

/**
.clearfix:after {
    content: '';
    display: table;
    clear: both;
}**/
#main{
   background-color: white;
   float: right;
   height:400px;
   width: 100%;
   position: absolute;
   display: flex;
   z-index: 0;   
}

#main > div{
  display: inline;
}

#PL-left{
  width: 50%;
}

#PL-right{
  width: 50%;
}

#sidebar{
   background-color: IndianRed;
   width:50%;
   height:400px;
   position: fixed;
   display: flex;
   z-index: 1; 
   overflow: hidden;  
   
}

#sidebar > div {
  
}

#business-left{  
  width: 50%;
}

#business-right{
  left: 50%;
  position: fixed;
  width: 50%;  
}