Make child full height of parent and vertically center text

I want to display a number and 2 text areas in a row.

The number should be in a "box" , with the background the height of the row and the number it's self should be vertically and horizontally centered in the "box".

I know I could do something like position: absolute; top: 0, left: 0 on the .number but this brings it out of the document flow. and the text, actual number does not get centered.

* {
  box-sizing: border-box;
}
.container {
  width: 40%;
}
.number {
  background: skyblue;
  /*position: absolute;*/
  top: 0;
  bottom: 0;
  vertical-align: middle;
}
.row > div {
  display: inline-block;
  vertical-align: top;
}
.row {
  background: lightgreen;
  position: relative;
}

<div class="container">
  <div class="row">
    <div class="number">10</div>
    <div class="textArea">
      <div class="companyName">Top title</div>
      <div class="industry">secondary text</div>
    </div>
  </div>
</div>

EDIT 1: You can see in the snippet that the box is not the full height of the container. That is not what I want.

EDIT 2: I guess you could cheat by using gradient but then I would have to make sure that the text area matches up to where the number box end to make the gradient look like the color is for the number "box".