How to auto-adjust DIV height according to the next related height?

Question

I am looking for a CSS layout solution ( IE9 + ) that will mimic "automatically custom table cells" as follows:

---

The only thing that I change with the help of tables is the height of the lower cells, the upper cell automatically responds to the change.

Here is the table code and JSFiddle demo that randomize the height of the bottom cell.

HTML:

<div>
    <table>
        <tr>
            <td>Auto Adjust</td>
        </tr>
        <tr>
            <td id="adjust">Fixed Height</td>
        </tr>
    </table>
</div>

CSS

td {
   border:solid 1px red
}
table {
   width:100%;
   height:100%;
}
div {
   height:300px;
   border:solid 1px blue;
}

#adjust{
   height:50px;
}

Q : How can I achieve the same goal using modern layout methods?

Answer 1

How about this?

http://jsfiddle.net/NicoO/HfpL6/4/

.wrap
{
    height:300px;
    border:solid 1px blue;
}
.table {
    width:100%;
    height:100%;
    display: table;
    border-spacing: 2px;
}

.row
{
    display: table-row;
}

.cell  
{
    display: table-cell;
    border:solid 1px red;
    vertical-align: middle;
}

#adjust{
    height:50px;
}

This html:

<div class="wrap">
    <div class="table">
        <div class="row">
            <div class="cell">
                Auto Adjust
            </div>
        </div>
        <div class="row">
            <div id="adjust" class="cell">
                Fixed Height
            </div>
        </div>
    </div>
</div>

Update

, , - calc, JS: http://jsfiddle.net/NicoO/HfpL6/7/

JS .

html, body
{
    height: 100%;
    margin:0;
    padding:0;
}

*
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wrap
{
    height:300px;
    border:solid 1px blue;
}
.table 
{
    width:100%;
    height:100%;
}

.row
{
    height: 50%; 
    position: relative;
}

.cell  
{
    border:solid 1px red;
    vertical-align: middle;
    position: absolute;
    top:2px;
    right:2px;
    bottom:2px;
    left:2px;
}

#adjust:not([style])
{
    background-color: green;

}

Answer 2

Flexbox. , .

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes