title: Move an absolute positioned element's right side to the left side of it's parent
body: <p><strong>The Problem</strong></p>
  
  <p>I have a container within another one. The rule <code>display: inline-block;</code> on the outer container is a given. I want that the content of the inner container <em>ends</em> where the content of the outer one starts. I tried using <code>left: -100%;</code> but naturally it moves the content only as far as the outer container is wide. The use case: The inner element will be a tooltip shown on hover aligned on the left side.</p>
  
  <p>How can I got both elements aligned after each other and not overlapping without using JavaScript?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div&gt;
      Short content
      &lt;div&gt;This is very long test sentence.&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div {
      position: relative;
      display: inline-block;
      margin: 40px 200px;
      background: rgba(123, 234, 345, 0.7);
  }
  
  div &gt; div {
      position: absolute;
      top: 20px;
      left: -100%;
      margin: 0;
      background: rgba(0, 0, 0, 0.1);
      white-space: nowrap;
  }
  </code></pre>
  
  <p><strong>Demo on jsFiddle</strong></p>
  
  <p><a href="http://jsfiddle.net/dkv9W/" rel="noreferrer">Demo</a></p>