JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<div class="container">
<div class="foo">
  <img src="https://static.fundingcircle.com/img/m2dm/uk/case-studies/borrowers-patchwork-2/l-1307ee7b.jpg" class="image">
  <div class="info-box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
  </div>
</div>
</div>

CSS

.container {
  display: flex;
  background: pink;

}

.foo {

  width: 50%;
  position: relative;
  margin-left: auto;
}

img {
  width: 100%;
}

.info-box {
  
  padding: 20px;
  
  transform: translate(10px, -30px);
  font-size: 1.2em;
  left: 10%;
  top: calc(60%);
  width: 60%;
  background: indianred;
  box-shadow: -2px 2px 4px 2px dimgrey;
}