JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left">
  <img src="http://lorempixel.com/1400/1200/sports" class="img-responsive" />
  <div class="home_image_title">
    <h5>New</h5></div>
</div>
<div class="right">
    <img src="http://lorempixel.com/1400/1200/sports"  class="img-responsive" />
  <div class="home_image_title">
    <h5>New</h5>
  </div>
</div>

CSS

* {
  box-sizing:border-box;
}
.left {
  position:relative;
  float: left;
  width:50%;
}

.right {
   position:relative;
  width: 50%;
  float:left;
}

.home_image_title {
  position: absolute;
  bottom: 80px;
  background: rgba(0, 0, 0, 0.4);
  text-align: center;
  left: 0;
  width: 100%;
  height: auto;
}

.home_image_title h5 {
  font-size: 48px;
  color: #FFFFFF;
  padding: 32px;
  margin: 0px;
}
.img-responsive {
  display:block;
  max-width:100%;
  height:auto;
}