JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <style>
        
    </style>

    </head>
    <body>
        <div class="content float">
            <div class="gap"> content goes here</div>
        </div>
        <div class="aside float">
            aside content
        </div>
        <div class="clear"></div>
        <div class="aside1 float">
            aside content111
        </div>
        
    </body>
</html>

CSS

.float{
float:left;
}
.content{

    background:#f00;
    width:60%;
    margin:5px;
}
.aside{
    background:#ff0;
    float:right;
    width:40%;
}
.aside1{
    background:#f0f;
}
.clear{
    clear:both;
}

.gap {
    margin:10px;
    margin-left:50px;
    background:#0ff;
    padding:20px 40px;
    padding-left:20px;    
    padding-right:20px; 
      padding-top:40px;
   padding-bottom:40px; 
}