JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="fir"><img src="https://s-media-cache-ak0.pinimg.com/736x/16/48/f4/1648f4e01b50d7629559b12f42d6dbc6.jpg"></div>
  <div class="sec">
    <div class="inner">text</div>
  </div>
</div>

SCSS

div {
  box-sizing: border-box;
}

.main {
  width: 100%;
}

.fir {
  float: left;
  width: 80%;
  border: 1px solid red;
}

.fir img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

.sec {
  position: relative;
  float: left;
  width: 20%;
  padding-top: 80%;
  color: #fff;
  background: royalblue;
  .inner {
    position: absolute;
    bottom: 0;
  }
}