Question

I want to create a header with 2 divs in it. The left div needs to be the same height as the right one, but the right one can scale based on its contents.

The left div‘s contents need to be vertically aligned to the middle.

I tried something like this:

<header>
    <div id="test1">
        <div>LOGO</div>
    </div>
    <div id="test2">
        <h1>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</h1>
    </div>
</header>

Answer 1

Use display: table-cell;

Working Demo

Edit:

In case if you want jQuery Solution it works on all browsers