JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box1"></div>
        <div id="box2"></div>

CSS

html {
                /* force scrollbars */
                height: 101%;
            }
            body {
                margin: 0; 
                padding:0; 
                white-space:nowrap; 
            }  
            #box1,
            #box2 {
                display:inline-block;
                width: 400px;
                height: 200px;  
                vertical-align:top;
                white-space:normal;
            }
            #box1 {
                background: #ce0000;
                 margin-right:-5px;
            }
            #box2 {
                background: #8e0000;
            }

            @media screen and (max-width: 799px) { 
                body { 
                    white-space:normal; 
                }
                #box1,
                #box2 {
                    width: 300px;
                }
            }