How can I make the height of a <div> inside a display: table-cell be 100%

Question

I have a table in my HTML that uses display: table. In the row I have two cells with some top/bottom padding and inside those I have <div> s which can be a different height:

<div style="display: table-row;">
    <div style="display: table-cell; padding-top:1rem; padding-bottom: 1rem;">
       <div style="background-color: red;">
          <input ng-model="row.abc">
       </div>
    </div>
    <div style="display: table-cell; padding-top:1rem; padding-bottom: 1rem;">
       <div style="background-color: blue;">
          <input ng-model="row.def">
          <input ng-model="row.ghi">
       </div>
    </div>
</div>

Is there some way that I can make the height of the red and the blue be equal? As it is now the red is just half the height of the blue. Note that I am not looking for something that would make the two inputs go inline. I'm looking for a way to make the red area expand in height to match whatever height the blue is and vice versa.

I would like this to work using modern browsers. Thanks

Answer 1

Why don't you drop the div inside the cell? Because this would work.

<div class="table">
    <div class="table-row">
        <div class="table-cell" style="background-color: red;">
           <input type="text" value="test" />
        </div>
        <div class="table-cell" style="background-color: blue;">
              <input type="text" value="test" />
              <input type="text" value="test" />
        </div>
    </div>
</div>

http://jsfiddle.net/e6vx7j8d/

Answer 2

Is there a compelling reason to be using nested <div> elements rather than normal table elements?

In any case, you should be able to set height: 100% as a style for each table cell, to force each one to fill its container's vertical dimension.