JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page-wrapper">
    <div class="search-wrapper"></div>
    <div class="content-wrapper">
        <div class="leftPage"></div>
        <div class="rightPage"></div>
    </div>
</div>

CSS

body, html {
    width:100%;
    height:100%;
}
.page-wrapper {
    width: 100%;
    height: 100%;
}
div.search-wrapper {
    background-color: grey;
    height: 50px;
    width: 100%;
    width: inherit;
    float: left !important;
    padding-right: 7px;
    padding-bottom: 3px;
}
div.content-wrapper {
    height: 100%;
    width: 100%;
    position:relative;
}
div.content-wrapper > div {
    float: left;
}
div.leftPage {
    background-color: black;
    height: 100%;
    width: 454px;
    position:absolute;
}
div.rightPage {
    background-color: red;
    height: 100%;
    width: 100%;
    position:absolute;
    left:454px;
}