JSFiddle - React, Tailwind, and code Playground

by yash009

HTML

<p>This one is with flex-grow</p>
<div class="flex">
  <div class="col1">1 col</div>
  <div class="col2 fg">2 col</div>
</div>

<p>This one is with width 100%</p>
<div class="flex">
  <div class="col1">1 col</div>
  <div class="col2 fw">2 col</div>
</div>

CSS

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  min-width: 700px;
  width: 100%;
}

.col1 {
  width: 300px;
  height: 200px;
  background-color: cyan;
}

.col2 {
  height: 200px;
  background-color: skyblue;
}

.fg {
  flex-grow: 1;
}

.fw {
  width: 100%;
}