JSFiddle - React, Tailwind, and code Playground

HTML

<div class="leftcolumn">
    <img src="/images/sx.jpg" alt="sx" height="100" width="90" />
</div>
<div class="slideshow" ></div>
<div class="rightcolumn">
    <img src="/images/dx.jpg" alt="dx" height="100" width="90" />
</div>

CSS

.leftcolumn { height:400px; width:100px; float:left; position:relative; border:1px solid blue; overflow:auto; }
.leftcolumn img { position:absolute; top:0px; right:0px; }

.slideshow { background:url(yourimage.gif) no-repeat center center;
height:400px;
width:200px;
    float:left; }

.rightcolumn { height:400px; width:100px; float:right; position:relative; border:1px solid red; overflow:auto; }
.rightcolumn img { position:absolute; bottom:0px; left:0px; }