JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="layout">
    <div class="col-l"></div>
    <div class="col-r"></div>
    <div class="col-c"></div>
</div>

SCSS

$col-l-width: 100px !default;
$col-r-width: $col-l-width !default;
$col-c-min-width: 550px !default;

$layout-min-width: ($col-l-width + $col-r-width + $col-c-min-width) !default;

.layout {
    min-width: $layout-min-width;
}
.col {
    &-l,
    &-r,
    &-c {
        height: 100px;
    }
    
    &-l {
        float: left;
        width: $col-l-width;
        
        background: orange;
    }
    
    &-r {
        float: right;
        width: $col-r-width;
        
        background: purple;
    }
    
    &-c {
        min-width: $col-c-min-width;
        float: none;
        overflow: hidden;
        
        background: yellow;
    }
}