xbzpLL

index.html

		    <div class="outer">
      			<div class="middle">
				        <div class="inner">

					          <h1>'Steady' Kuchar Again in Masters Hunt Super really long title that is sure to wrap</h1>

				        </div>
			      </div>
		    </div>

	
  <div class="nextwrapper">
		  <div class="outer2">
			    <div class="middle2">
				      <div class="inner2">

					        <p>NEXT</p>

				      </div>
			    </div>
		  </div>
	</div>

style.css

.outer {
    display: table;
    position: absolute;
    height: 130px;
    margin-left: 0;
  padding-left: 0;


  border: 0px green solid;
  
  background-image: url(http://simulation.masters.com/images/pics/thumbs/a_rd1_Goss_201404103273.jpg);
    background-repeat: no-repeat;
  background-size: 230px;
  
  width: 80%;
  
}

.middle {
    display: table-cell;
    vertical-align: middle;
  border: 0px black solid;
}

.inner {
    padding: 20px;
    padding-right: 20px;
 
  border-right: 1px #B6B6B6 solid;

  
}









.nextwrapper { 
border: 0px blue solid;  
height: 130px;
  width: 18%;
  float: right;
 margin-right: 20px; 
}




.outer2 {
    display: table;
    position: relative;
    float: left;
    height: 130px;



}

.middle2 {
    display: table-cell;
    vertical-align: middle;
  border: 0px black solid;

}

.inner2 { 
  display: table-cell;


}








h1 {display: block;
margin-left: 230px;
  font-size: 32px;

 }


p {display: block;
border: 0px pink solid;
  font-size: 32px;  




}

xbzpLL.markdown

xbzpLL

A Pen by CM Harrington on CodePen.

License.