JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top">
    
    <div id="left">
       <ul id="ul1" style="list-style-type:none">
          <li><a style="color:orange" href="/">About Us</a></li>
                        <br>
          <li><a style="color:orange" href="/players">Players</a></li>
                        <br>
         <li><a style="color:orange" href="/contactus">Contact Us</a></li>
        </ul>

    </div>
           
    <div id="right">
        THis is some content.
        <br>
        THis is some content.
            <br>
        THis is some content.
                <br>
        THis is some content.
                    <br>
        THis is some content.
                        <br>
        THis is some content.
                            
                            <br>
        THis is some content.
                                <br>
        THis is some content.
                                    <br>
        THis is some content.<br>
        THis is some content.
    </div>
     <div style="clear: both;"></div>
</div>
                                     <div style="clear: both;"></div>
<div>
</div>

CSS

#top{background:yellow;overflow:hidden;}
#left{
    float:left;
    background-color:gray;
    padding-bottom:100%;
    margin-bottom:-100%;
}

#right{
    float:left;
    background-color:gray;
    padding-bottom:100%;
    margin-bottom:-100%;
}