Two images side by side and responsive

Im trying to put two images side by side and make them responsive. The problem now is, that the second image wraps first and then reacts to the size of the browser. I want them to stay on the same line (level) and change their size automatically and wrap at a certain point (this part isn't the problem)....

The html:

<div id="wrapper">
  <div id="outer">
      <div class="itemwrapper">
        <img src="item2.jpg" alt="bag" />
      </div>
      <div class="itemwrapper">
        <img src="item3.jpg" alt="pen" />
      </div>
  </div>
</div>

The css:

#wrapper {
  max-width: 1050px;
  margin: 60px auto 60px auto;
  background-color: #DDD
}

.itemwrapper {
  display: inline;
}

img {
  max-width: 100%;
  height: auto;
}

Can anybody help?