JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent" style="">
    <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:5px solid red;
 }
.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%;
}