sqxAe

index.html

<div class="article cf">
  <div class="primary content">
    <h2>Some Stuff</h2>
    <p>Some content. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
  </div>
  <div class="secondary content">
    <img class="responsive" src="http://placehold.it/350x150">
  </div>
</div>

style.css

*{ margin:0; padding:0; }

.article {
  min-width: 300px;
  max-width: 700px;
  background: beige;
  border-bottom: 1px solid silver;
}

.content { width: 49%; min-height: 150px; }
.primary { margin-left: 50%; float: right; }
.secondary { float: left; margin-top: -150px; }
img.responsive { width: 100%; margin: auto; }
.cf:before, .cf:after { content: " "; display: table; }
.cf:after {clear: both; }