Two images side by side and responsive - html

Question

I'm 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;
}

Answer 1

use display table to set it side by side and keep it side by side and responsive.
display: table; with table-layout: fixed; will create a fluid layout for child elements with display: table-cell;
this will not only keep them the same width but also keep the containers the same height.
vertical-align: top; will keep them aligned to the top alternatively you can change the vertical position to middle and bottom plus some others.
Any questions just fire away.
#wrapper {
max-width: 1050px;
margin: 60px auto 60px auto;
background-color: #DDD
}
#outer {
display: table;
width: 100%;
table-layout: fixed;
}
.itemwrapper {
display: table-cell;
vertical-align: top;
width: 100%;
}
img {
max-width: 100%;
height: auto;
}
<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>

Answer 2

if image are same size or same ratio, you may use flex , width and min-width to set a break point:
#outer {
width:70%;/* demo*/
margin:auto;/* demo*/
display:flex;
flex-wrap:wrap;
}
#outer>div {flex:1;}
#outer>div>img {
width:100%;
min-width:200px;/* demo*/
}
<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="http://lorempixel.com/200/100" alt="bag" />
</div>
<div class="itemwrapper">
<img src="http://lorempixel.com/400/200" alt="pen" />
</div>
</div>
</div>
remove or reset to your needs the rules commented with demo.

Answer 3

Thanks for the help, but I'm doing it with a different solution now, whicha friend suggested:
#outer {
position: relative;
width: 50%;
height: 0;
margin: 30px auto 0 auto;
padding-top: 25%;
background-color: #999;
}
.itemwrapper {
position: absolute;
width: 50%;
height: 100%;
top: 0;
}
.item2 {
left: 50%;
}
#outer img {
height: 100%;
max-width: 100%;
}
<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="http://lorempixel.com/200/100" alt="bag" />
</div>
<div class="itemwrapper item2">
<img src="http://lorempixel.com/400/200" alt="pen" />
</div>
</div>
</div>
This evokes another problem though. The images arent filling the itemwrappers. I think i need to write some js for this :S.