Vertical align of three elements, one of them with dynamic width

Fuckyeah table-cell

by martinwolf

HTML

<div id="wrap">
    <div id="eins"></div>
    <div id="zwei">
        <div class="inner">Lorem ipsum dolor si as dlkas dkl</div>
    </div>
    <div id="drei">
        <div class="inner"></div>
    </div>
</div>

CSS

body {
    padding: 30px;
}

#wrap {
    width: 600px;
    background: grey;
}

#eins {
    display: block;
    float: left;
    margin-right: 10px;
    width: 30px;
    height: 30px;
    background: red;
}

#zwei {
    display: table-cell;
    padding-right: 10px;
    height: 30px;
    width: 100%;
    vertical-align: middle;
    background: yellow;
}

#zwei .inner {
    line-height: 15px;
}

#drei {
    display: table-cell;
    width: 60px;
    height: 30px;
    vertical-align: middle;
}

#drei .inner {
    width: 60px;
    height: 15px;
    background: blue;
}