Two Column A

by pphheerroonn

HTML

<div class="twoCol">
  <div class="colOne">
    <h3 class="doubleH3">
    Design
    </h3>
    <h3>
    The All New iPhone Design
    </h3>
  </div><!--colOne END-->
  <div class="colTwo bgimg">
   <img src="https://www.compub.com/media/catalog/product/cache/1/image/1800x/040ec09b1e35df139433887a97daa66f/M/K/MKQL2B-A_101.jpg">
  </div><!--colTwo END-->
</div><!--twoCol END-->

CSS

h3:doubleH3 + h3{
  //Styling for double headings
  padding:0;
  margin-top:0;
  line-height:1em;
}

.twoCol{
  width:100%;
}

.twoCol > div{
  float:left;
  background:red;
  width:calc(50%);
  height:150px;
}
.twoCol > div:after{
  clear:both;
}

.twoCol div.bgimg{
  position:relative;
  overflow:hidden;
}
.twoCol div.bgimg img{
  position:absolute; 
  width:100%;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}