JSFiddle - React, Tailwind, and code Playground

HTML

<div class="clearfix">
  <div class="l-content__wrapper">
    <div class="l-content blue">content (percentage)</div>
  </div>
  
  <div class="l-sidebar green">sidebar (static)</div>
</div>

CSS

.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}  
.clearfix:after {
  clear: both;
}
.l-content__wrapper {
  float: left;
  margin-right: -100%;
  width: 100%;
}
.l-content {
    margin-right: 220px;
}

.l-sidebar {
    float: right;
    margin-left: -100%;
    width: 200px;
}
.green {background-color: green;}
.blue  {background-color: blue;}