make inline-block elements responsive - html

Question

html
<div class="article">
<img src="http://cdn1.tnwcdn.com/wp-content/blogs.dir/1/files/2013/01/Cookies1-520x245.jpg"/>
<div class="dateAuthor">
<span class="date">Jan 4, 2014</span>
<span>— By </span>
<span class="author">Jonathan Lakin</span>
</div>
<h1>Cookies Tell You A Lot About Your Audience, But Most of it is Wrong</h1>
</div><div class="article">
<img src="http://cdn2.tnwcdn.com/wp-content/blogs.dir/1/files/2014/01/20140103_151801-520x245.jpg"/>
<div class="dateAuthor">
<span class="date">Jan 4, 2014</span>
<span>— By </span>
<span class="author">Jonathan Lakin</span>
</div>
<h1>Ten Website Trends To Expect</h1>
</div>
css
.article{
display: inline-block;
vertical-align: top;
margin: 0 1.6839378238341968911917098445596% 30px 1.6839378238341968911917098445596%; /* 13px / 772px */
}
.article img{
max-width: 360px;
width: 100%;
display: block;
}
.article h1{
max-width: 350px;
width: 100%; /* 350px / 800px */
margin-top: 10px;
font-size: 1.5em;
}
#media only screen
and (max-width : 1000px) {
#articlesWrapper{
margin-left: 1.0416666666666666666666666666667%; /* 10px / 960px */
margin-right: 1.0416666666666666666666666666667%; /* 10px / 960px */
}
}
#media only screen
and (max-width : 720px) {
.article img{
max-width: 100%;
}
.article h1{
max-width: 97.222222222222222222222222222222%; /* 350px / 360px */
}
}
jsFiddle
The problem here is when the width drops below around 850px the inline-block styles doesn't work and the elements drops below other elements, what I want to do is make those responsive. I mean, when the width drops below 850px I want the elements to stay as inline-blocks and instead reduce there size/width as the width drops. Something like what is happening below 720px but as inline-blocks. How can that be done?

Answer 1

http://jsfiddle.net/6wbfy/3/
This seems to work very well.
.article {
width: 45%;
}