JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="wrapper">
  <div class="item-1"></div>
  <div class="item-2"></div>
  <div class="item-3"></div>
</div>

SCSS

.wrapper {
   max-width: 500px;

  &:after {
    content: "";
    display: table;
    clear: both;
  }
   
  div {
      color: #fff;
      padding: 10px 15px;
      display: block;
      float: left;
      
      &.item-1 {
        background-color: #afafaf;
        width: 20%;
      }
      
      &.item-2 {
        background-color: #8a8a8a;
        width: 20%;
      }
      
      &.item-3 {
        background-color: #565656;
        width: 30%;
      }
   }
}

JavaScript

function calcBlock() {
	var wrapper = $('.wrapper'),
			item1 = $('.item-1', wrapper),
      item2 = $('.item-2', wrapper),
      item3 = $('.item-3', wrapper);

	item1.html( item1.width() );
  item2.html( item2.width() );
  item3.html( wrapper.width() - (item1.width() + item2.width()) );
}

$(window).resize(function(event) {
	calcBlock()
}).resize();