JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col-10"></div>
</div>
<br>
<div class="row">
  <div class="col-5"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col-5"></div>
</div>
<br>
<div class="row row-centered">
  <div class="col"></div>
  <div class="col"></div>
</div>

CSS

.row {
  display:flex;
  height: 100px;
  gap: 10px;
}

.col {
  flex: 1;
  background: red;
}
.col-10 {
  flex: 10;
}
.col-5 {
  flex: 5;
}


.row-centered {
  justify-content: center;
}

.row-centered .col {
  flex: 0 0 8.333333333333333%;
}