JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <div id="right">
        <div id="right-right">
            <div id="object-3">
                <h1>Object 3</h1>
            </div>
            <div id="object-4">
                <h1>Object 4</h1>
            </div>
        </div>
        <div id="object-2">
            <h1>Object 2</h1>
        </div>
        <br style="clear:both"/>
        <div id="object-8">
            <h1>Object 8</h1>    
        </div>
        <div id="object-7">
            <h1>Obj 7</h1>
        </div>
    </div>
    <div id="left">  
        <div id="object-1">
            <h1>Object 1</h1>
        </div>
        <div id="object-5">
            <h1>Object 5</h1>
        </div>
        <div id="object-6">
            <h1>Object 6</h1>
        </div>
    </div>
</div>

CSS

#right{ float:right;width:49% }
#left{ width:49% }
#right-right{ float:right;width:55% }
#object-3,#object-4{ border:1px solid #666;margin:0 0 10px 0 }
#object-8{ float:right;width:78%;border:1px solid #666 }
#object-7{ width:18%;border:1px solid #666 }
#object-2{ width:43%;border:1px solid #666;height:50px }
#object-1,#object-5,#object-6{ border:1px solid #666;margin:10px 0;height:30px }