JSFiddle - React, Tailwind, and code Playground

by Zacc206

HTML

<div id="bodyMain">
      <div id="body">
        <div id="bodyLeft"> left text goes here<br />
        </div>
        <div id="bodyRight">Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here Right text goes here 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;*/
}