title: CSS display size is changed due to length of text
body: <p>I want to make a formatted paragraph whose image is located in left, the text is located in right with CSS.</p>
  
  <p>However, it looks good when I type a single line text, but the top position is changed when I type two-line text or more.</p>
  
  <p>Its source is on 
  <a href="http://jsfiddle.net/RXrvZ/1883/" rel="nofollow">http://jsfiddle.net/RXrvZ/1883/</a></p>
  
  <p>and the main part of CSS is:</p>
  
  <pre><code>.post-container {
      margin: 20px 20px 0 0;
      border: 1px dotted #333;
      overflow: auto;
  }
  .greenbox {
      display: block;
      border: 1px dotted #383;
      width: 100%;
  }
  .redbox {
      display: inline-block;
      border: 1px dotted #f33;
      width: 70%;
      height: 100px;
  }
  .redbox10 {
      display: inline-block;
      border: 1px dotted #f33;
      width: 20%;
      height: 100px;
  }
  </code></pre>
  
  <p>And its HTML code is like:</p>
  
  <pre><code>&lt;div class="greenbox"&gt;
      &lt;div class="redbox10"&gt;
          &lt;img src="#"&gt;
      &lt;/div&gt;
      &lt;div class="redbox"&gt;
          One Line Text
      &lt;/div&gt;
  &lt;/div&gt;    
  </code></pre>
  
  <p>How can I place the top line same whatever I type in?</p>
  
  <p>Thanks for your help.</p>