title: Align child div above parent to the right, don't overlap
body: <p>I have a basic setup like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    border:1px solid green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  
    &lt;div class="parent"&gt;
      Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image. 
    &lt;/div&gt;
  
    &lt;div class="parent"&gt;
      &lt;div class="child"&gt;
          &lt;img src="http://i.imgur.com/sQSbV8o.jpg" width="200" height="200"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to align the <code>.child</code> div to the top-right of the <code>.container</code>. I want to achieve this <strong>without</strong> <code>position:fixed</code> or some <code>margin-top:-px</code> hack, or changing any of the HTML. </p>
  
  <p>Is this insanity possible?</p>
  
  <p><a href="https://jsfiddle.net/jyz8vw9q/1/">jsFiddle</a> for testing. </p>
  
  <h3>What I've tried so far</h3>
  
  <ol>
  <li><p>I can set <code>float:right</code> to the <code>.child</code> div, but obviously, the first parent div is above it.</p></li>
  <li><p>I can set <code>position:absolute</code> to the <code>.child</code> div, and <code>top:0</code> and <code>right:0</code> but it overlaps clearly.</p></li>
  <li><p>Maybe <code>flex-box</code> insanity is the key? Although compatibility issues...</p></li>
  </ol>