JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tab-pane" id = "test">
    <div id="Box2"> 
        <h1> Graph Text </h1>
  </div>
    <div id="BOX1">
  </div>
</div>

CSS

#test {
    width:700px;
    height: 500px;
    background: grey;
    position:relative;
}

#BOX1 {
	display: inline-block;
    width: 500px;
	height: 300px;
	background: lightgrey;	
	position:absolute;
    z-index:1;
    left: 50%;
    margin-left: -250px;
}

#Box2{
  	width: 250px;
    height: 50px;
    background: lightblue;
    position:absolute;
    left: 125px;
    z-index:2;
}

h1 {
  font: 25px Helvetica, sans-serif;
  text-align: center;
}