JSFiddle - React, Tailwind, and code Playground

by Shabeer Sheffa

HTML

<!-- <div id="bodyMain"> -->
<div id="body">
    <div id="bodyLeft">left text goes here
        <br />
    </div>
    <div id="bodyRight">Right text goes here
        <br>Right text goes here
        <br>Right text goes here
        <br>Right text goes here
        <br>Right text goes here
            <br>Right text goes here
                <br>Right text goes here
                    <br>Right text goes here<br>Right text goes here
            
            </div>
</div>
<!-- </div> -->

CSS

* {
    margin:0;
    padding:0;
}
#bodyMain {
    position:relative;
    overflow:hidden;
    /*added*/
    border:1px solid red;
    /*removed height:auto;*/
    /*removed width:100%;*/
}
#body {
    display:table;
    /*added*/
    border:1px solid green;
    width:804px;
    margin: 0 auto;
    /*improved*/
}
#bodyLeft {
    border:1px solid blue;
    float:left;
    width:200px;
    /*removed height:auto;*/
}
#bodyRight {
    border:1px solid orange;
    float:right;
    width:600px;
    /*removed height:auto;*/
}