Align child div above parent to the right, don't overlap

Question

I have a basic setup like this:

.container {
  border:1px solid green;
}

<div class="container">

  <div class="parent">
    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. 
  </div>

  <div class="parent">
    <div class="child">
        <img src="http://i.imgur.com/sQSbV8o.jpg" width="200" height="200">
    </div>
  </div>

</div>

I want to align the .child div to the top-right of the .container. I want to achieve this without position:fixed or some margin-top:-px hack, or changing any of the HTML.

Is this insanity possible?

jsFiddle for testing.

What I've tried so far

1. I can set float:right to the .child div, but obviously, the first parent div is above it.

2. I can set position:absolute to the .child div, and top:0 and right:0 but it overlaps clearly.

3. Maybe flex-box insanity is the key? Although compatibility issues...

Answer 1

you can use calc() in .parent along with position:absolute in .child, and by reading your comments, it won't have the `problem with second parent having content.

.container {
  border: 1px solid green;
  position: relative;
  min-height: 200px;
}
.parent {
  max-width: calc(100% - 220px)  /* img width + some margin */
}
.child {
  position: absolute;
  top: 0;
  right: 0;
}

<div class="container">
  <div class="parent">
    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.
  </div>
  <div class="parent">
    <div class="child">
      <img src="http://i.imgur.com/sQSbV8o.jpg" width="200" height="200">
    </div>
    <p>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.</p>
    <p>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.</p>
  </div>
</div>

Answer 2

You could set the display for the parent divs to table-cell:

.parent {
  display:table-cell;
  vertical-align:top;
}

jsFiddle example