JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-flex">

  <div class="main">
    <span>Fill remain, min. twice the "side"</span>
  </div>

  <div class="side">
    <span>Take content size</span>
  </div>

</div>

CSS

.container-flex {
  display: flex;
  flex-wrap: wrap;
}

.main {
  flex: 10000;
  min-width: 66.666%;
  background: lightblue;
}

.side {
  flex: 1 0 auto;
  background: lightgreen;
}

span {
  display: inline-block;
  padding: 20px;
}