CodePen

HTML

            
              <div class="container">
  <article>
    <div class="copy">
      
      <h1>Lorem ipsum dolor</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</p>
      
      <!--
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</p> -->
      
    </div>
    <figure>
        <img src="http://blog.codepen.io/wp-content/uploads/2012/06/White-Small.png" alt="">  
    </figure>

  </article>
    <article>
    <div class="copy">
      
      <h1>Lorem ipsum dolor</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</p>
     
    </div>
    <figure>
        <img src="http://blog.codepen.io/wp-content/uploads/2012/06/White-Small.png" alt="">  
    </figure>

  </article>
  
</div>
            
          
!
via HTML Inspector

CSS

            
              .container {
  width:960px;
  margin:0 auto;
  border:1px solid grey;
}

article {
  display:table;
}

.copy {
  width: 50%;
  display:table-cell;
  vertical-align:top;
  padding:10px;
  border-bottom:thin solid darkgrey;
}

figure {
  display:table-cell;
  vertical-align:middle;
  background:rgba(0,0,0,0.25);
  border-bottom:thin solid darkgrey;
}

figure img {
  background:black;
  margin: 0 25%;
  
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................