<h4>The Challenge</h4>
<ul>
  <li>1st column's width is the width of its widest element</li>
  <li>the rest of the columns are filling the rest of the space (flex:1 or width:100%)</li>
  <li>you can merge cels (remember COLSPAN)</li>
  <li>can be used now - has "enough" browser support</li>
</ul> 

<h4>Flexbox Grid</h4>
<div class="flex-grid">
  <div class="col">This</div>
  <div class="col">This little piggy had roast beef.</div>
</div>
<div class="flex-grid">
  <div class="col">This little</div>
  <div class="col">This little piggy had roast beef.</div>
</div>
<div class="flex-grid">
  <div class="col">This little piggy</div>
  <div class="col">This little piggy had roast beef.</div>
  <div class="col">This little piggy had roast beef.</div>
</div>

<h4>div-table</h4>
<div class="div-table">
  <div class="flex-grid">
    <div class="col">This</div>
    <div class="col" colspan="2">This little piggy had roast beef.</div>
  </div>
  <div class="flex-grid">
    <div class="col">This little</div>
    <div class="col">This little piggy had roast beef.</div>
  </div>
  <div class="flex-grid">
    <div class="col">This little piggy</div>
    <div class="col">This little piggy had roast beef.</div>
    <div class="col">This little piggy had roast beef.</div>
  </div>
</div>

<h4>old school table</h4>
<table cellspacing="0" cellpadding="0">
  <tr>
    <td>This</td>
    <td colspan="2">This little piggy had roast beef.</td>
  </tr>
  <tr>
    <td>This little</td>
    <td colspan="2">This little piggy had roast beef.</td>
  </tr>
  <tr>
    <td>This little piggy</td>
    <td>This little piggy had roast beef.</td>
    <td>This little piggy had roast beef.</td>
  </tr>
</table>

<h4>Grid(new age table)</h4>
<div class="grid">
  <div class="col">This</div>
  <div class="col colspan-2">This little piggy had roast beef.</div>
  <div class="col">This little</div>
  <div class="col colspan-2">This little piggy had roast beef.</div>
  <div class="col">This little piggy</div>
  <div class="col">This little piggy had roast beef.</div>
  <div class="col">This little piggy had roast beef.</div>
</div>

* {box-sizing: border-box;}
body {padding: 20px;}
h4 {margin-bottom: 10px;}
ul {margin: 0 0 40px 0; padding: 0 0 0 20px;}

td,
.col {
  background: lightBlue;
  padding: 10px 20px;
  border: 1px solid white;
  border-width: 0 0 1px 1px;
  white-space: nowrap;
  &:first-child {
    background: lightGreen;
    border-width: 0 0 1px 0;
  }
  &:not(:first-child) {
    width: 100%;
  }
}

.flex-grid {
  display: flex;
  .col {
    &:not(:first-child) {
      flex: 1;
    }
  }
}

.div-table {
  display: table;
  .flex-grid {
    display: table-row;
    .col {
      display: table-cell;
    }
  }
}

.grid {
  display: grid;
  grid-template-columns: auto 1fr;
  .col {
    &:nth-child(odd) {
      &:not(:last-child) {
        background: lightGreen;  
      }
    }
    &.colspan-2 {
      grid-column-start: 2;
      grid-column-end: 4;
    }
  }
}