JSFiddle - React, Tailwind, and code Playground

HTML

<div class="blocks">
  <div class="blocks--block__fixed-width red"></div>  
    <div class="blocks--block green"></div>
    <div class="blocks--block blue"></div>
</div>

CSS

.blocks--block__fixed-width.red {
    background: red;
    width: 100px;
    height: 100%;
    margin-left: -100px;
    float: left;
}

.blocks {
    margin-left: 100px;
    height: 100%;
}

.blocks--block.green {
    width: 50%;
    height: 100%;
    background: green;
    float: left;
}

.blocks--block.blue {
    width: 50%;
    float: left;
    height: 100%;
    background: blue;
}

.blocks:after {
    clear: both;
}

body, html {
    height: 100%;
}