JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class = "container">
  <div class = "flexCol">
  </div>
  <div class = "flexCol" id = "larger">
  </div>
</div>
</body>

CSS

.container{
   display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
      background: #fff;
  width: 400px;
  height: 200px;
}

.flexCol{
  flex: 1 1 auto;
  background: #f00;
}

#larger{
  flex: 2 1 auto;
  background: #0f0;
  height: 80%;
}