JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
            <div id="header">            
            </div><!-- header -->

            <div id="mainView">
                <div id="content">
                </div><!-- content -->

                <div id="squaressWrapper">
                    <div id="square1"></div><!-- dummy -->
                    <div id="square2"></div><!-- dummy -->
                    <div id="square3"></div><!-- dummy -->
                    <div id="square4"></div><!-- dummy -->
                </div><!-- squaressWrapper -->           
            </div><!-- mainView -->
        </div><!-- wrapper -->

CSS

* {
        -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
        margin: 0;
        padding: 0;
    }

    html {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    body {
        -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
        -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
        -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
        font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
        font-size: 12px;
        text-transform: uppercase;
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
    }

    #wrapper {
        width: 100%;
        height: 100%;
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        -webkit-flex-direction: column;
        -webkit-align-content: stretch;
        align-content: stretch;
    }

    #header {
        height: 50px;
        width: 100%;
        background: #ffb8c4;
    }

    #mainView {
        flex: 1;
        -webkit-flex: 1;
        position: relative;
        background: #666;
    }

    #squaressWrapper {
        position: absolute;
        height: 100%;
        background: green;
        right: 0;
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        -webkit-flex-direction: column;
        -webkit-align-content: stretch;
        align-content: stretch;
    }

    #square1 {
        position: relative;
        flex: 1;
        -webkit-flex: 1;
        width: 100px;
        border: 2px solid white;
        background: green;
    }

    #square2 {
        position: relative;
        flex: 1;
        -webkit-flex: 1;
        width: 100px;
        border: 2px solid white;
        background: green;
    }

    #square3 {
      ...