JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
     <div id="primary">Primary</div>
     <div id="secondary">Secondary</div>
</div>

CSS

#main {
    clear: both;
    padding: 1.625em 0 0;
    background-color: red;
}
    #main:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0; 
    }
#primary {
    float: left;
    margin: 0;
    width: 100%;
    background-color: yellow;
}
#secondary {
    float: right;
    margin-right: 7.6%;
    width: 18.8%;
    background-color: blue;
}