how to have 2 divs side by side with position relative - html

Question

I am building a site that requires 6 images side by side and when you hover each image you should be able to see a larger image.
Currently I have managed to write the following code that shows 2 images with the hover feature. The problem I have is that the images appear on top of each rather than side by side. I have tried adding a float:left but then the 2nd image doesn't show up the hover image and I am not sure how I can fix this.
The following is the HTML and CSS:
.Enlarge {
position: relative;
}
.Enlarge span {
position: absolute;
left: -9999px;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
.Enlarge span img {
margin-bottom: 5px;
}
div.Enlarge:hover {
z-index: 999;
cursor: pointer;
}
div.Enlarge:hover span {
visibility: visible;
opacity: 1;
top: 10px;
left: 0px;
z-index: 999;
width: 240px;
height: 340px;
padding: 10px;
}
<div class="Enlarge">
<img src="image1.jpg" alt="" /><span><img src="image1h.jpg" alt="" /></span>
</div>
<div class="Enlarge">
<img src="image2.jpg" alt="" /><span><img src="image2h.jpg" alt="" /></span>
</div>
Would appreciate it if somebody could advise on how I can fix this, as I need to show 6 images but at present tried with 2 images to make sure it works.

Answer 1

Take a look at my jsfiddle i just used style="float: left"
<div class="Enlarge" style="float: left">
<img src="image1.jpg" alt="" /><span><img src="image1h.jpg" alt="" /></span>
</div>
<div class="Enlarge" style="float: left">
<img src="image2.jpg" alt="" /><span><img src="image2h.jpg" alt="" /></span>
</div>
Edit: it was missing the link https://jsfiddle.net/m4odfrcr/

Answer 2

modify your class as below
.Enlarge {
position: relative;
display:inline-block;
}