JSFiddle - React, Tailwind, and code Playground

HTML

<div id="blue_box">
    <div id="left">Foo</div>  
    <div id="divider"></div> 
    <div id="right">Bar</div> 
</div>

CSS

#divider {
  
  height:100px;
  width: 5px;
   
  background-color:white;
  float:left;
  margin:0px;
  
}

#left {
  position: relative;
  float: left;
  width: 40%;
  margin: 0 ;
  padding: 0;
height:400px;
background-color:red;
}

#right {
  position: relative;
  float: right;
  width: 40%;
  margin: 0;
  padding: 0;
  height:400px;
    background-color:red;
}

#blue_box {
  background-color:blue;
  border-radius: 10px;
  -moz-border-radius:10px;
  -webkit-border-radius: 10px;
  position: relative;
  width: 100%;
  min-width: 400px;
  max-width: 600px;
  padding: 2%;
 height:100%;  
  overflow: auto; /*needed so that div stretches with child divs*/
}