CSS - Make parent & Child div's equal height
<p>What I'm trying to create looks like this:</p>

<pre><code> --------------------------------------------------
 |                        |           |           |
 |                        | .box1     | .box2     |
 |                        |           |           |
 |   .image               -------------------------
 |                        |                       |
 |                        |     .description      |
 |                        |                       |
 |                        |                       |
 --------------------------------------------------   
</code></pre>

<p>Where the .box1 and .box2 will be the same height compared to eachother (f.e. <code>flex: 1;</code>) and the image and the shell around .box1, .box2 and .description the same size as well.</p>

<p>I just can't seem to find a way that does exactly this, I figured Flexbox examples are rare for this case. </p>

<p>I thought a table would work for this example, having a nested table like the following:</p>

<pre><code>&lt;table class="parent-wrapper"&gt;
  &lt;tr&gt;
    &lt;td class="image"&gt;
      &lt;img src="...."/&gt;
    &lt;/td&gt;
    &lt;td class="parent-box"&gt;
      &lt;table class="child-wrapper"&gt;
        &lt;tr&gt;
          &lt;td class="box1"&gt;.box1&lt;/td&gt;
          &lt;td class="box2"&gt;.box2&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;!-- I don't know a workaround for this as well --&gt;
          &lt;td class="description" colspan="2"&gt;.description&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/td&gt;
 &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>But this turns out like the following:</p>

<p><a href="https://i.stack.imgur.com/OuGi2.png" rel="nofollow"><img src="https://i.stack.imgur.com/OuGi2.png" alt="enter image description here"></a></p>

<p>What I want is that the 'image' td is sized to be the same height as the 'child-wrapper' td</p>

<p>So this: (made with hardcoded heights)</p>

<p><a href="https://i.stack.imgur.com/I1XVD.png" rel="nofollow"><img src="https://i.stack.imgur.com/I1XVD.png" alt="enter image description here"></a></p>