JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="header"></div>
    <div class="content">
        <div class="content-menu"></div>
        
        <div class="content-wrapper">
            <div class="content-main"></div>     
        </div>
    </div>
</div>

CSS

.wrapper {
    margin: 0 auto;
    max-width:600px;
}
.header {
    width:100%;
    height:50px;
    background:green;
}
.content {
    width: 100%;
    height: 400px;
    background: yellow;
}
.content-menu{
    float:left;
    width:150px;
    height:400px;
    background: blue;
}
.conten-wrapper {
    float:right;
    width:100%;
    margin-left:-150px;
}
.content-main {
    margin-left: 150px;
    background: red;
    height:400px;
}