Make child full height of parent and vertically center text
<p>I want to display a number and 2 text areas in a row.</p>

<p>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".</p>

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

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  box-sizing: border-box;
}
.container {
  width: 40%;
}
.number {
  background: skyblue;
  /*position: absolute;*/
  top: 0;
  bottom: 0;
  vertical-align: middle;
}
.row &gt; div {
  display: inline-block;
  vertical-align: top;
}
.row {
  background: lightgreen;
  position: relative;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
    &lt;div class="number"&gt;10&lt;/div&gt;
    &lt;div class="textArea"&gt;
      &lt;div class="companyName"&gt;Top title&lt;/div&gt;
      &lt;div class="industry"&gt;secondary text&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>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.</p>

<p>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".</p>