JSFiddle - React, Tailwind, and code Playground

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="wrapper">
  <div class="fixed"></div>
  <div class="flexed"></div>
  <div class="flexed"></div>
  <div class="flexed"></div>
</div>

<div class="wrapper">
  <div class="fixed"></div>
  <div class="flexed"></div>
  <div class="flexed two"></div>
</div>

<div class="wrapper">
  <div class="fixed"></div>
  <div class="flexed"></div>
  <div class="flexed"></div>
  <div class="flexed"></div>
</div>

CSS

.wrapper {
  display: flex;
  border: 1px solid #333;
}

.wrapper div {
  height: 200px;
}

.wrapper .fixed {
  min-width: 180px;
  width: 180px;
  max-width: 180px;
  background-color: #ccc;
}

.wrapper .flexed {
  flex-grow: 1;
  background-color: #eee;
  border-left: 1px solid #333;
  flex-basis: fill;
}

.wrapper .flexed.two {
  flex-grow: 2;
}