JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<!-- semantic -->>
<header>
    Header
</header>
<aside>
    Aside (Floated Left)
</aside>
<section>
    Content (Floated Left, Can Be Floated To Right As Well)
</section>
<!-- Clearing Floating Elements-->
<div class="clear"></div>
<footer>
    Footer
</footer>

CSS

* {
     /* Not related to floats / clear both, used it for demo purpose only */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

header, footer {
    border: 5px solid #000;
    height: 100px;
}

aside {
    float: left;
    width: 30%;
    border: 1px solid #000;
    height: 300px; 
}

section {
    float: left;
    width: 70%;
    border: 1px solid #000;
    height: 300px;   
}

.clear {
    clear: both;
}