Estoy tratando de poner dos imágenes una al lado de la otra y hacer que respondan. El problema ahora es que la segunda imagen se ajusta primero y luego reacciona al tamaño del navegador. Quiero que permanezcan en la misma línea (nivel) y cambien su tamaño automáticamente y se ajusten en cierto punto (esta parte no es el problema) ...

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

El css:

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

.itemwrapper {
  display: inline;
}

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

¿Alguien puede ayudar?