JSFiddle - React, Tailwind, and code Playground

HTML

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