css - How to position two elements inline even when the window is resized ? -

I want two elements:

Do not matter if the window is resized horizontally. Because now they are broken into two rows on this screen:

I left an element and tried to float the other right but it does not work.

Can you please point me out how to do this? Thanks!

using the trick max-width: 100%; Altitude: Auto

HTML img / Strong>

  & lt; Div class = "wrapper" & gt; & Lt; Div class = "left" & gt; & Lt; Img src = "http://placehold.it/600x600" alt = "" & gt; & Lt; / Div & gt; & Lt; Div class = "right" & gt; & Lt; Img src = "http://placehold.it/600x600" alt = "" & gt; & Lt; / Div & gt; & Lt; Div class = "clr" & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
  CSS   
 . Warper {Width: 50%; Margin: 0 auto; Border: 1px solid red; }. Left {width: 50%; Swim left; } .right {width: 50%; float right; } .CLR {clear: both; } IMG {max-width: 100%; Height: auto; }