JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dr-row">
    <div class="dr-col-2">
      one
    </div>

    <div class="dr-col-1">
      two
    </div>

    <div class="dr-col-1">
      three
    </div>

    <div class="dr-col-1">
      four
    </div>

    <div class="dr-col-2">
      five
    </div>
  </div>

<div class="dr-row">
    <div class="dr-col-1">
      one
    </div>

    <div class="dr-col-1">
      two
    </div>

    <div class="dr-col-1">
      three
    </div>

    <div class="dr-col-1">
      four
    </div>

    <div class="dr-col-1">
      five
    </div>
    <div class="dr-col-1">
      six
    </div>
    <div class="dr-col-1">
      seven
    </div>
  </div>

CSS

.dr-row {
  display: flex;
  box-sizing: border-box;
}
.dr-col-1 {
  flex-grow: 1;
  flex-basis: 0;
  outline: 1px solid black;
}

.dr-col-2 {
  flex-grow: 2;
  flex-basis: 0;
  outline: 1px solid black;
}