JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tbl">
  <div class="row">
    <div class="cell">ID </div>
    <div class="cell">Nr </div>
    <div class="cell">Header 1 </div>
    <div class="cell span4-5"> Header 2 </div>
  </div>
  <div class="row">
    <div class="cell">1</div>
    <div class="cell">200</div>
    <div class="cell">Content</div>
    <div class="cell">Content</div>
    <div class="cell">Content</div>
  </div>
  <div class="row">
    <div class="cell">2</div>
    <div class="cell">201</div>
    <div class="cell span3-5">Wider Content</div>
  </div>
  <div class="row">
    <div class="cell">3</div>
    <div class="cell">202</div>
    <div class="cell span3-4">Content</div>
    <div class="cell">Content</div>
  </div>
</div>

CSS

.tbl {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  min-height: 50px;
}

.cell {
  flex: 4;
  border: 1px solid red;
}

.cell:nth-child(1) {
  flex: 1;
}

.cell:nth-child(2) {
  flex: 2;
}

.cell.span4-5 {
  flex: 8 12px;                    /*  match 2 border/padding  */
}

.cell.span3-4 {
  flex: 8 12px;                    /*  match 2 border/padding  */
}

.cell.span3-5 {
  flex: 12 24px;                   /*  match 3 border/padding  */
}

.row:first-child .cell {
  display: flex;
  justify-content: center;         /*  center horiz. */
  align-items: center;             /*  center vert. */
}

.row .cell {
  padding: 5px;
  box-sizing: border-box;
}