How to make CSS table-cell contents fill the height of the cell? – Photoshop

I have a div table layout like this:

…but I’d like the nested table on the right to match the height of the table on the left, so that the right table rows are equally spaced apart. It seems that there’s some padding going on that’s preventing the right table from filling the full height of it’s container.

Want I want is this (it’s a photoshop mock, but you get the idea):

I do not want to set a fixed height on the outer container. Both left and right table heights should match whichever one is tallest. I’m using a div table solution at the moment to contain the tables because it solves the problem whereby the table containers (light-green) height will match (I’m open to other possible solutions). However, it still leaves the problem of the shorter table not filling the height of it’s container, as in the image.

Here’s a fiddle.

The HTML:

<div class="outer-container">
    <div class="inner-container">
      <div class="child">
        <table>
          <tr>
            <td>Label 1a</td>
            <td>Value 1a</td>  
          </tr>
          <tr>
            <td>Label 1b</td>
            <td>Value 1b</td>
          </tr>
          <tr>
            <td>Label 1c</td>
            <td>Value 1c</td>
          </tr>
          <tr>
            <td>Label 1d</td>
            <td>Value 1d</td>
          </tr>
          <tr>
            <td>Label 1e</td>
            <td>Value 1e</td>
          </tr>
        </table>
      </div>
      <div class="spacer"></div>
      <div class="child">
        <table>
          <tr>
            <td>Label 2a</td>
            <td>Value 2a</td>
          </tr>
          <tr>
            <td>Label 2b</td>
            <td>Value 2b</td>
          </tr>
          <tr>
            <td>Label 2c</td>
            <td>Label 2c</td>
          </tr>
      </table>
    </div>
  </div>
</div>

and the styling:

.outer-container {
  display: table;
  padding: 10px;
  background: #5f5f5f;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.inner-container {
    display: table-row;
    padding: 10px;
    margin-top: 50px;
    width: 100%;
}
.child {
    display: table-cell;
    background: #d3e4d1;
    border: 1px solid white;
}
.spacer {
  display: table-cell;
  width: 10%;
}
.child table {
    width: 100%;
    height: 100%;
    padding: 10px;
}
.child td {
    width: 50%;
}
.child td:first-child {
    text-align: right;
    padding-right: 10px;
}

IE8 and up solution required.