JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class="one">
        <img class="img1" src="http://static.howstuffworks.com/gif/vincent-van-gogh-paintings-from-saint-remy-2.jpg" />
    </div>
    <div class="two">
        <img class="img2" src="http://static.howstuffworks.com/gif/vincent-van-gogh-paintings-from-saint-remy-2.jpg" />
    </div>
</div>

CSS

.parent {
      position:relative;
      height:50px;
      width:200px;border:1px solid black;
  }
  .parent:hover {
      border-color:blue;
  }
  .one {
      position:absolute;
      height:40px;
      width:50px;
      left:20%;
  }
  .img1 {
      position:absolute;
      max-height:100%;
      max-width:100%;
  }
  .img2 {
      position:absolute;
      max-height:100%;
      max-width:100%;
  }
  .two {
      position:absolute;
      right:10%;
      height:40px;
      width:50px;
      left:20%;
  }