Я пытаюсь поставить два изображения рядом и сделать их отзывчивыми. Проблема в том, что второе изображение сначала переносится, а затем реагирует на размер браузера. Я хочу, чтобы они оставались на одной линии (уровне), автоматически меняли свой размер и переносились в определенный момент (эта часть не проблема) ....

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>

CSS:

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

.itemwrapper {
  display: inline;
}

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

Кто-нибудь может помочь?