title: How to move the right div to the right with css
body: <p>Here is a simple box with two columns:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
    &lt;div class="left"&gt;
      &lt;div class="image-title"&gt;Image title
      &lt;/div&gt;
      &lt;img src="http://placehold.it/100x100"&gt;
    &lt;/div&gt;&lt;!-- left --&gt;
    &lt;div class="right"&gt;
      &lt;div class="title"&gt;
       &lt;h2&gt;Title here&lt;/h2&gt;
      &lt;/div&gt;&lt;!-- title --&gt;
      &lt;div class="content"&gt;
       &lt;p&gt;Content here.&lt;/p&gt;
       &lt;p&gt;Content here.&lt;/p&gt;
      &lt;/div&gt;&lt;!-- content --&gt;
    &lt;/div&gt;&lt;!-- right --&gt;
  &lt;/div&gt;&lt;!-- wrapper --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#wrapper {
      overflow: auto;
      width: 100%;
      border: 1px solid red;
      padding: 1px;
  }
  .left {
      display: inline-block;
      float: left;
      width: 30%;
      border: 1px solid grey;
     text-align: center;
  }
  .right {
      display: inline-block;
      width: 70%;
      border: 1px solid grey;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/r0by9cLw/2/" rel="nofollow">Demo</a></p>
  
  <p>I expected that the right div should be placed on the right side, but it's placed under the left div element. How can I make it done?</p>
  
  <p>Thanks for your help.</p>