JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>  

    <div class="center">
    
        This is my content!
    
        <div class="side left">LEFT</div>       
        <div class="side right">RIGHT</div>
    </div>
    
</body>    
</html>

CSS

body {
    overflow-x: hidden;    
}
.center {
    position: relative;
    width: 200px;   /* change this to 1000px */
    background-color: #dfd;    
    margin: auto;
    text-align: center;
    min-height: 600px;
}
.side {
    position: absolute;
    width: 400px;   
    top: 0;
    background-color: #ddd;
    text-align: center;
    min-height: 200px;
}
.left {
    left: -400px;
}
.right {
    right: -400px;
}