JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex-container">
   <div class="fixed-column"> Small </div>
   <div class="flex-column"> Big </div>
</div>

<hr>

<div class="flex-container">
   <div class="flex-column"> Big </div>
   <div class="fixed-column"> Small </div>
</div>

CSS

html,body {
  color: white;
  font-weight: bold;
  font-size: 20px;
  font-family: sans-serif;
}

.flex-container {
   display: flex;
}
.flex-column {
   flex: 1;
   background-color: blue;
}

.fixed-column {
  width: 200px;
  background-color: red
}