JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="page">
        <header>
            <div id="bar1"></div>
            <div id="rightBox"></div>
            <div id="bar2"></div>
            <div id="bar3"></div>
            <div style="clear: both;"></div>
        </header>

        <div id="left">
        bla
        </div>
        </div>
        </body>

CSS

html, body {
            margin: 0px;
            height: 100%;
        }
        #page {
            position: relative;
            margin: 0 auto;
            width: 1200px;
            min-height: 100%;
            max-height: 100%;
            height: auto !important;
        }
        
        #bar1 {
          min-height: 40px;
          background-color: olive;
        }
        
        #bar2 {
                    width: calc(100% - 175px);
                    height: 40px;
                    background-color: blue;
                }

                #bar3 {
                    width: calc(100% - 175px);
                    height: 135px;
                    overflow: hidden;
                    background-color: yellow;
                }

                #rightBox {
                    position: absolute;
                    right: 0px;
                    width: 175px;
                    height: 175px;
                    background-color: orangered;
                    float: right;
                }
                
                #left {
                  background-color: green;
                  min-height: 100%;
                  max-height: 100%;
                  width: 50%;
                }