JSFiddle - React, Tailwind, and code Playground

HTML

<div id="first" class="container">
    <div id="header">&nbsp;</div>
    <div id="left">&nbsp;</div>
    <div id="right">&nbsp;</div>
    <div id="footer">&nbsp;</div>
</div>

<div id="second" class="container">
    <div id="header">&nbsp;</div>
    <div id="left">&nbsp;</div>
    <div id="right">&nbsp;</div>
    <div id="footer">&nbsp;</div>
</div>

CSS

div {
    border: 1px dashed #999;
}
#header {
    width: 500px; 
    background-color: #E8D5C6;
    height: 100px;
    /*margin-top: -8px;*/
    /*margin-left: -8px;*/
}

#left {
    width: 15px; 
    background-color: #919191;
    height: 400px;
    display:inline-block;
    /*margin-left: -8px;*/
    float:left;
}
#right{
    background-color: #f19191;
    width: 483px;
    height: 400px;
    display:inline-block;
    float:left;
}

#footer{
    background-color: #18D5C6;
    width: 500px;
}

#first{
    position: absolute;
    z-index:1;
}
#second{
    position: absolute;
    z-index:2;
    top: 50px;
    left: 50px;
}
.container{
    padding: 10px;
    background: #fc0;
}