JSFiddle - React, Tailwind, and code Playground

by IceCreamYou

HTML

<div id="outer">
  <div id="inner">
    <div id="container">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
  <div id="right-column"></div>
</div>

CSS

#outer {
  background-color: #333;
  display: flex;
  flex-flow: row nowrap;
}
#inner {
  background-color: #B99;
  flex-grow: 1;
}
#container {
  background-color: #BBB;
}
#container::after {
  clear: both;
  content: "";
  display: table;
}
.child {
  background-color: #AEF;
  display: inline-block;
  height: 50px;
  margin: 10px;
  width: 50px;
}
#right-column {
  background-color: #AEC;
  flex-basis: 80px;
  flex-shrink: 0;
}