Img in Div Causes Adjacent One to Lower Down

Question

I am having a ton of difficulty troubleshooting the cause of this problem. I have this setup:

<div id='wrap'>
        <div id='left'>
        <!--content nothing much just text so far-->
        </div>
        <div id='right'>
            <img src="WWII.jpg" />
        </div>
</div>

Then for CSS I have this (I realize I could compress it some):

body,html {
    margin:0;
    padding:0;
}
#wrap {
    text-align:center;
}
#left {
    width:30%;
    height:700px;
    display:inline-block;
}
#right {
    width:65%;
    height:700px;
    display:inline-block;
    text-align:center;
}
#right img {
    position:relative;
    padding:0;
    margin:0;
    display:block;
    width:50%;
}
#right, #left {
    border:2px solid #0099FF;
    border-radius:1em;
}

As you can see, both are inline-block divisions so they stand side by side. This works flawlessly if I remove the img tag in the HTML. However, once I add the img tag back, the left division is floating way to the bottom. Here is the JSfiddle: https://jsfiddle.net/99sz8mnv/

I apologize for all code (JS and CSS) being in the HTML file.

Edit: Now it seems the source is not the img tag at all, not sure how to fix it at all.