I am trying to make two divs to be next to each other in a responsive way - css

Question

I am trying to make part of my responsive page look like: http://s17.postimg.org/k4bh7qxnj/Screen_Shot_2014_07_26_at_8_08_02_PM.png
I have tried a few things and I got the result found at this jsfiddle: http://jsfiddle.net/TachionFiddle/4HkTS/3/
This is my code:
<div id="my-wrapper" style="
max-width: 941px;
display: inline-block;
width: auto;
height: auto;">
<div class="left-stuff" style="
display:inline-block;
width: 18%;">
<img alt="" src="http://s16.postimg.org/db3hs4ndt/sac_history.png" style="width: auto;
height: auto; max-width:50%;">
<img alt="" src="http://s16.postimg.org/db3hs4ndt/sac_history.png" style="width: auto;
height: auto; max-width: 50%;">
<img alt="" src="http://s16.postimg.org/db3hs4ndt/sac_history.png" style="width: auto;
height: auto; max-width: 50%;">
</div>
<div class="right-stuff" style="display:inline-block;max-width: 75%">
<img src="http://s17.postimg.org/gns7jkwkf/webbanner2.png" style="width: auto; height: auto;
max-width:100%;">
</div>
</div>

Answer 1

Here's the general idea:
<div class="wrapper">
<div class="col-10">
<img alt="" src="http://s16.postimg.org/db3hs4ndt/sac_history.png">
<img alt="" src="http://s16.postimg.org/db3hs4ndt/sac_history.png">
<img alt="" src="http://s16.postimg.org/db3hs4ndt/sac_history.png">
</div>
<div class="col-90">
<img src="http://s17.postimg.org/gns7jkwkf/webbanner2.png">
</div>
</div>
.wrapper {
width: 100%;
}
.col-10 {
width: 10%;
float: left;
vertical-align: top;
}
.col-10 img {
display: block;
max-width: 100%;
width: 100%;
}
.col-90 {
width: 90%;
float: left;
}
.col-90 img {
max-width: 100%;
width: 100%;
}
DEMO
I would suggest putting the three blocks into one image and making the heights line up in photoshop, will make your life a lot easier.