title: Issue with inline-block elements with unknown width
body: <p>I'd like to line up two elements in a header:</p>
  
  <pre><code>&lt;div class="col-md-3"&gt;
      &lt;div class="header"&gt;
          &lt;div class="icon"&gt;&lt;/div&gt;
          &lt;div class="title"&gt;&lt;h1&gt;This is the title row&lt;/h1&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;p&gt;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. &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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):</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>I can't get them to line up using inline-block. Any ideas why?</p>
  
  <p><a href="http://embed.plnkr.co/PVEZMadBwzxqdKPrIHEP/preview">PLUNKER</a></p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I added a new plunker (see above) to better demonstrate the problem.</p>
  
  <p>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.</p>