title: Putting elements on the same line
body: <p>How can I put the following elements on the same line? I know it has to do with the display property, but that's the one that always stumps me and can never seem to get to work.</p>
  
  <p><a href="http://jsfiddle.net/MgcDU/4137/" rel="noreferrer">http://jsfiddle.net/MgcDU/4137/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="small-video-section"&gt;
      &lt;div class="thumbnail-container"&gt;
        &lt;img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" /&gt;
      &lt;/div&gt;
      &lt;div class="thumbnail-container"&gt;
        &lt;img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" /&gt;
      &lt;/div&gt;
      &lt;div class="thumbnail-container"&gt;
        &lt;img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" /&gt;
      &lt;/div&gt;
      &lt;div class="thumbnail-last"&gt;
        &lt;img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.small-video-section {
    height: 134px;
  }
  
  .thumbnail-container {
    width: 220px;
    margin-top: 15px;
    margin-right: 20px;
    display: inline-block;
  }
  
  .thumbnail-last {
    width: 220px;
    margin-top: 15px;
    display: block;
  }
  </code></pre>
  
  <p>Thanks. :)</p>