JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://www.facticemagazine.com/newsletter/img/test/1.jpg" />

<div class="text">
<h1>Keep them<br/>closed</h1>
<p>Helen Molsted by Arron Dunworth<br/>Exclusive  /  November 11, 2016</p>
<p class="read-more">Read more > </p>
</div>

CSS

.text {
  margin-left: 450px;
  text-align: left;
  display: inline-block;
  max-width: 500px;
  position: absolute;
  z-index: 1000;
  width: 100%;
  left: 0;
}

img {
  float: left; 
  max-width: 800px; 
  width:100%;
}

h1 {
   font-family: 'GFS Didot', serif; 
   font-weight: 300; 
   text-align:left; 
   margin-top:30px; 
   font-size:40px;
}

p {
  text-align: left; 
  line-height:21px; 
  margin-top:20px;
}
.read-more {
  text-align: left; 
  line-height:21px; 
  font-weight:700
}