JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flexbox">
  <div class="flexItem" style="border-left: 150px solid black"></div>
  <div class="flexItem" style="border-right: 150px solid orange"></div>
  <div class="flexItem"></div>
</div>

CSS

.flexbox {
    display: flex;
    width: 600px;
    flex-direction: row;
}

.flexItem {
    flex: 1 0 0px;
    height: 20px;   
    box-sizing: border-box;
}

.flexbox :nth-child(1) {
    background-color: blue;
}
.flexbox :nth-child(2) {
    background-color: green;
}
.flexbox :nth-child(3) {
    background-color: red;
}