Two images side by side and responsive

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

Answer 1

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%;
}

This evokes another problem though. The images arent filling the itemwrappers. I think i need to write some js for this :S.