JSFiddle - React, Tailwind, and code Playground

by Derek Wood

HTML

<div class="container">
    
    <div class="main">main</div>
    
    <div class="sub">sub</div>
    
</div>

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* google border box - moves padding to the inside of the box */ 
}

.container {
    width: 90%;
    max-width: 60em;
    margin: 0 auto; /* no margin on the top and bottom - auto margin on the sides */
    overflow: hidden; /* shame */
}

.main {
    width: 70%;
    float: left;
}

.sub {
    width: 30%;
    float: left;
}





















.container {
    border: 1px solid red;
    padding: .5em;
}

.main {
    border: 1px solid blue;
}

.sub {
    border: 1px solid purple;
}