Issue with inline-block elements with unknown width

Question

I'd like to line up two elements in a header:

<div class="col-md-3">
    <div class="header">
        <div class="icon"></div>
        <div class="title"><h1>This is the title row</h1></div>
    </div>
    <p>This is some content text. This is some content text. This is some content text. This is some content text. This is some content text. </p>
</div>

To the left is a fixed width icon, and I want to the title to fill up the remaining width. (The title is broken in two lines because of the narrow columns):

.col-md-3 {
    width: 200px; /*this width is just for illustrating the problem, in reality this is Bootstrap's 25% width column*/
}
.icon {
    display: inline-block;
    height:50px;
    width: 50px;
    background: red;
}
.title {
    display: inline-block;
}

I can't get them to line up using inline-block. Any ideas why?

PLUNKER

UPDATE

I added a new plunker (see above) to better demonstrate the problem.

I'm looking for an explanation why inline-block doesn't work in this case, and a possible solution how to make it work. Any workarounds posted are really appreciated, but I'd really like to find out what's the deal with inline-blocks in this case.

Answer 1

If the content of the inline-block does not fit on a single row, it will try to fit as a whole on the next line. This is different from regular inline elements, that most of the time is allowed to wrap to the next line.

You might want to read up on this behaviour at the W3C specification about the 'normal flow'.

Not sure why everyone makes it so complex, why not use a float?

.icon {
    float: left;
    width: 50px;
    height: 50px;
    background-color: red;
}
.title {
    padding: 0 10px;
    overflow: hidden;
}
.title h1 {
    line-height: 50px;
    margin: 0;
}

<div class="col-md-3">
    <div class="header">
        <div class="icon"></div>
        <div class="title"><h1>This is the title row erg erg erg erg erg erg er</h1></div>
    </div>
    <p>This is some content text. This is some content text. This is some content text. This is some content text. This is some content text. </p>
</div>