title: Inline block with position absolute is collapsing inside relative block
body: <p>I have an relative block and I need to put an dynamic text right from it. </p>
  
  <pre><code>&lt;div class='wrap'&gt;
  &lt;div class='text'&gt;This text...&lt;/div&gt;
  &lt;/div&gt;
  
  .wrap{
  width: 300px;
  height: 20px;
  background-color: #e3e3e3;
  position: relative;
  margin-bottom: 60px
  }
  
  .text{
  background: #27818d;
  color: #fff;
  display: inline;
  position: absolute;
  left: 312px;
  }
  </code></pre>
  
  <p>Here is a fiddle for you to get an idea.
  <a href="http://jsfiddle.net/PmhM3/2/" rel="nofollow">http://jsfiddle.net/PmhM3/2/</a></p>
  
  <p>As can you see, the .text block is collapsing. Is there a solution to keep it from collapsing like this?</p>