How to place two divs side by side when stretched to full size?
<p>I have two <code>div</code>s streched to the size of the parent(<code>body</code>), but on application of inline-block attribute the divs are placed one below the other instead of beside each other.</p>

<p>I want them to be placed beside each other, such that i need to scroll horizontally instead of vertically.</p>

<p>jsFiddle - <a href="http://jsfiddle.net/wJ73v/364/" rel="nofollow">http://jsfiddle.net/wJ73v/364/</a></p>

<pre><code>html
&lt;div class="red"&gt;&lt;/div&gt;
&lt;div class="red-blue"&gt;&lt;/div&gt;

css

html {
    height: 100%;
    width: 100%;
}
body {
    margin:0;
    padding: 0;
    height: 100%
}
.red {
    background-color: red;
    height: 100%;
    width: 100%;
    display: inline-block;
}
.red-blue {
     background: linear-gradient(red, blue);
     height: 100%;
    width: 100%;
    display: inline-block;
}
</code></pre>