Why is my "display:inline-block" function not working? the imagines are still on top of each other

Question

HTML Code:

<div class="wgs"> 
        <img class="wgs-mole-head"
      src="/Users/c/whack-a-mole/mole-head.png"
      alt="Mole Head">
  <img class="wgs-mole-hill"
  src="/Users/c//whack-a-mole/mole-hill.png">
</div>
<div class="wgs"> 
        <img class="wgs-mole-head"
      src="/Users/c/whack-a-mole/mole-head.png"
      alt="Mole Head">
  <img class="wgs-mole-hill"
  src="/Users/c//whack-a-mole/mole-hill.png">
</div>

CSS Code:

.wgs {
height: 640;
width: 220;
position: absolute;
display: inline-block;
}

.wgs-mole-head {
height: 640;
width: 356;
position: absolute;
left: 109px;
}

.wgs-mole-hill {
height: 640;
width: 482;
position: absolute;
top: 262px;
}

I have tried changing the sizes, changing wbs to relative instead of absolute, putting the duplicate imagines in its own block element, etc. I just want the two block elements (the wghs elements) side by side, but instead they are stacked on top of each other.