Question

Please take a look at this jsFiddle: http://jsfiddle.net/omarjuvera/TpWNY/#base

I would like <div class="client"> to “inherit” <div class="contact">‘s height (Both inner div’s to have the same size)

Keep in mind that the content on both <div class="client"> or <div class="contact"> will dynamically change. So, there’s no way to know a predefined height. HOWEVER, <div class="client"> will always have 2 or 3 lines.

HTML

<div id="conteiner">
    <div class="client">Name: <br/>Phone:<br/>Emergency</div>
    <div class="contact">
        Contact 1<br/>
        Contact 2<br/>
        Contact 3<br/>
        Contact 4<br/>
        Contact 5<br/>
        Contact 6<br/>
        Contact 7<br/>
        Contact 8<br/>
    </div>
</div>

CSS

#conteiner {position: relative;}
#conteiner div {
    display: inline-block;
    border: 2px solid red;
    vertical-align: top;
    height: 100%;
}
#conteiner .client {
    width: 200px;
}
#conteiner .contact {
    width: 400px;
}

=== EDIT (07/12/2012) ===

Final jsFiddle: http://jsfiddle.net/omarjuvera/TpWNY/

Thank you @christofer-vilander !!!

Answer 1

How about using display: table; and display: table-cell; and make them behave like table elements?

Something like this – demo