How to get two pictures to align side by side?

<img id="showperson" style="border: 0px solid black; width: 152px; height: 232px;" src="https://i.imgur.com/e5jPp9q.png" align="middle" border="0" /> <script type="text/javascript">
<!--
// copyright 1998 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but please keep this
// notice with the code.

// var image information object
var mloi=new Object();

// set the image for swapping
function setswap()
{
if (! document.images)return;
var imgInfo=new Object();
imgInfo.defaultImg = new Image();
imgInfo.defaultImg.src = document.images[arguments[0]].src;
imgInfo.opts = new Object();
for (var i=1; i < arguments.length; i=i+2)
 {
 imgInfo.opts[arguments[i]]=new Image();
 imgInfo.opts[arguments[i]].src = arguments[i+1];
 }
mloi[arguments[0]] = imgInfo;
}

// set up the link for swapping
function swap(link,imgName,optName)
{
if (! document.images)return;
if (! link.swapReady)
 {
 link.imgName    = imgName;
 link.onmouseout = swapBack;
 link.swapReady  = true;
 }
document.images[imgName].src=mloi[imgName].opts[optName].src;
}

function swapBack()
 {document.images[this.imgName].src=mloi[this.imgName].defaultImg.src}

//-->
</script> <script type="text/javascript">
setswap("showperson",
'elroy',
'https://i.imgur.com/aiB3oPE.png',
'michel',
'https://i.imgur.com/8kZW6gt.png');
//
</script><br /><br /><a onmouseover="swap(this,'showperson','elroy')" href="http://wamidnight.forumotion.co.uk/u1"><img alt="Owner" style="border: 0px black solid; height: 82px; width: 42px;" src="https://i.imgur.com/JOqyhN5.png" border="0" /></a><br /> <a onmouseover="swap(this,'showperson','michel')" href="http://wamidnight.forumotion.co.uk/u36"><img alt="Owner" style="border: 0px black solid; height: 82px; width: 42px;" src="https://i.imgur.com/RiOn4Uc.png" border="0" /></a><br />