JSFiddle - React, Tailwind, and code Playground

by GYatesIII

HTML

<div class="wrap">
    <div class="left">
        Left
    </div>
    <div class="right">
        Right with a ton of content
    </div>
</div>
Here's some pushed down content

CSS

.wrap {
    position: relative;
}

.left {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    width: calc(100% - 60px);
    background-color: green;
}

.right {
    float: right;
    width: 50px;
    background-color: red;
}

@media only screen and (max-width: 500px){
    .left {
        width: auto;
        float: none;
    }
    
    .right {
        float: none;
        width: auto;
        position: static;
    }
}

.wrap:before,
.wrap:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.wrap:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.wrap {
    *zoom: 1;
}