JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line2">line 2</td>
    <td class="line3">line 3</td>
  </tr>
</table>

CSS

table {
  display: flex;
  width: 100%;
}
tbody {
  display: flex;
  flex-basis: 100%;
}
tr {
  display: flex;
  flex-basis: 100%;
  flex-flow: row wrap;
}
td {
  display: flex;
  flex-basis: 100%;
  flex-shrink: 0;
  margin: 1px;
}
.line1 { 
  flex-basis: 0; 
  flex: 1;
}
.line1 { background: red; }
.line2 { background: blue; }
.line3 { background: green; }
body { color: #fff; }