Make grid 1st item full height

Question

I want to make the first item of a grid full height, like a fixed column, here is my code:

HTML

<div class="cell">
  <div class="cell-50">column</div>
  <div class="cell-50">1</div>
  <div class="cell-50">2</div>
  <div class="cell-50">3</div>
  <div class="cell-50">4</div>
  <div class="cell-50">5</div>
  <div class="cell-50">6</div>
  <div class="cell-50">7</div>
  <div class="cell-50">1</div>
  <div class="cell-50">2</div>
  <div class="cell-50">3</div>
  <div class="cell-50">4</div>
  <div class="cell-50">5</div>
  <div class="cell-50">6</div>
  <div class="cell-50">7</div>
  <div class="cell-50">1</div>
  <div class="cell-50">2</div>
  <div class="cell-50">3</div>
  <div class="cell-50">4</div>
  <div class="cell-50">5</div>
  <div class="cell-50">6</div>
  <div class="cell-50">7</div>
  <div class="cell-50">1</div>
  <div class="cell-50">2</div>
  <div class="cell-50">3</div>
  <div class="cell-50">4</div>
  <div class="cell-50">5</div>
  <div class="cell-50">6</div>
  <div class="cell-50">7</div>
</div>

CSS

*{box-sizing:border-box;}
.cell{
  border:1px solid red;
  padding:10px;
  display: grid;
  grid-template-columns: 100px repeat(7, 1fr);
}
.cell-50{
  border:1px solid green;
}
.cell-50:first-child{
  background:tomato;
  grid-row: 1 / -1;
}

I have searched for this but only found solutions on making a column full width. I can't add another div, I have to use the 1st div on my grid.

JSFidle

UPDATE

This is answered by Hodrobond in a comment from in this question. Here is the solution https://jsfiddle.net/s6qz4fkx/