Responsive css divs won't stay next to each other - css

Question

I'm trying to make a responsive web layout. On the front page there is a div, with two divs in it. One for the caption and one for the image. The caption should stay next to the image at all times, but the image and caption should scale for smaller screens.
Here is my html;
<div class="content">
<div class="caption">
<h1>Blablabla</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ipsum quam, semper volutpat massa. Cras mattis malesuada sagittis. Cras luctus erat quis orci condimentum quis vulputate lectus venenatis. Proin lorem lorem, vehicula in porta id, facilisis id massa. Phasellus venenatis eros et diam dictum faucibus. Donec at rutrum orci. Vivamus quam sapien, mollis sed aliquet blandit, viverra nec enim. In sapien lectus, fringilla pretium sollicitudin eu, eleifend id mi. Phasellus ullamcorper massa vitae mauris</p>
</div>
<div class="image">
<img src="pics02.jpg">
</div>
</div>
And this is my css;
.content {
margin: 0px auto;
width:60%;
background-color:black;
margin-top:4em;
display:block;
}
.caption {
width:30%;
background-color:white;
height: auto;
display:inline;
margin:0px;
color:green;
float:left;
padding:6px;
display:block;
}
.image {
display:inline;
margin:0px;
float:right;
display:block;
}
.image img {
max-width:100% !important;
max-height:100% !important;
display:block;
}
In another topic here on stack I found that I should set the img tag with a max width and height and set the display to block everywhere.
Unfortunately that doesn't work when I'm scaling, the image gets smaller when you scale but it slides underneath the caption.

Answer 1

just add this to your image css class:
.image {
display:inline;
margin:0px;
float:right;
display:block;
width: 60%;
}
Hope this is what you want.
Otherwise, if you can update this example with real picture etc, we can help so much more: http://jsfiddle.net/BJ8gK/30/

Answer 2

Live Demo
Why are you used to multiple value
.caption {
width:30%;
background-color:white;
height: auto;
display:inline; // used to any one value
margin:0px;
color:green;
float:left; // used to any one value
padding:6px;
display:block; // used to any one value
}
Used to one property in your class .caption
do't used to multiple display value in a single class
I think You want to this Live Demo