JSFiddle - React, Tailwind, and code Playground

HTML

<section class = "photogrid">
<div class= "container">
<img src= 'http://thecsscoder.com/blog/blog-images/hobbies.jpg' > 
<div class= "text"> Skyscrapers are really neat and stuff because they are tall. The quick brown fox jumped over the lazy dogs!
</div>
</div>
    
<div class= "container">
<img src= 'http://thecsscoder.com/blog/blog-images/hobbies.jpg' > 
<div class= "text"> Skyscrapers are really neat and stuff because they are tall. The quick brown fox jumped over the lazy dogs!
</div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,900);

.photogrid {
    position: absolute; 
}

.container img{
  max-width: 10em; 
  position: relative;
  margin: 10px 0 0 10px;
  float: left; 
  max-width:40%;
  min-width:400px; 
}

.text {
  background:
    linear-gradient(
      rgba(0, 0, 0, 0.6),
      rgba(0, 0, 0, 0.6)
    );
  margin: 10px 10px 10px 10px;
  max-width:40%;
  min-width:400px; 
  border:1px
  font:16px;
  color: #fff;
  word-wrap: break-word;
  overflow:auto;
  position:absolute; 
}