Estou tentando colocar duas imagens lado a lado e torná-las responsivas. O problema agora é que a segunda imagem envolve primeiro e depois reage ao tamanho do navegador. Eu quero que eles permaneçam na mesma linha (nível) e alterem seu tamanho automaticamente e envolvam em um determinado ponto (esta parte não é o problema) ....

O 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>

O css:

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

.itemwrapper {
  display: inline;
}

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

Alguém pode ajudar?