title: All elements inside a div on a single line
body: <p>What I want to accomplish is keep all elements inside a div on a single line no matter how many there are:</p>
  
  <pre><code>&lt;div class="col-sm-9 items"&gt;
      &lt;div class="item"&gt;
          &lt;div class="image pull-left"&gt;
              &lt;img class="img-responsive" alt="a" src="images/product.png"&gt;
          &lt;/div&gt;
  
          &lt;div class="text pull-left"&gt;
              &lt;p&gt;Lorem Ipsum Dolor consecteur &lt;/p&gt;
              &lt;p&gt;$79/QUANTITY: 1&lt;/p&gt;
              &lt;h6 class="blue"&gt;Clear &lt;i class="fa fa-times-circle-o"&gt;&lt;/i&gt;&lt;/h6&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
          &lt;div class="image pull-left"&gt;
              &lt;img class="img-responsive" alt="a" src="images/product.png"&gt;
          &lt;/div&gt;
  
          &lt;div class="text pull-left"&gt;
              &lt;p&gt;Lorem Ipsum Dolor consecteur &lt;/p&gt;
              &lt;p&gt;$79/QUANTITY: 1&lt;/p&gt;
              &lt;h6 class="blue"&gt;Clear &lt;i class="fa fa-times-circle-o"&gt;&lt;/i&gt;&lt;/h6&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
          &lt;div class="image pull-left"&gt;
              &lt;img class="img-responsive" alt="a" src="images/product.png"&gt;
          &lt;/div&gt;
  
          &lt;div class="text pull-left"&gt;
              &lt;p&gt;Lorem Ipsum Dolor consecteur &lt;/p&gt;
              &lt;p&gt;$79/QUANTITY: 1&lt;/p&gt;
              &lt;h6 class="blue"&gt;Clear &lt;i class="fa fa-times-circle-o"&gt;&lt;/i&gt;&lt;/h6&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
          &lt;div class="image pull-left"&gt;
              &lt;img class="img-responsive" alt="a" src="images/product.png"&gt;
          &lt;/div&gt;
  
          &lt;div class="text pull-left"&gt;
              &lt;p&gt;Lorem Ipsum Dolor consecteur &lt;/p&gt;
              &lt;p&gt;$79/QUANTITY: 1&lt;/p&gt;
              &lt;h6 class="blue"&gt;Clear &lt;i class="fa fa-times-circle-o"&gt;&lt;/i&gt;&lt;/h6&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
          &lt;div class="image pull-left"&gt;
              &lt;img class="img-responsive" alt="a" src="images/product.png"&gt;
          &lt;/div&gt;
  
          &lt;div class="text pull-left"&gt;
              &lt;p&gt;Lorem Ipsum Dolor consecteur &lt;/p&gt;
              &lt;p&gt;$79/QUANTITY: 1&lt;/p&gt;
              &lt;h6 class="blue"&gt;Clear &lt;i class="fa fa-times-circle-o"&gt;&lt;/i&gt;&lt;/h6&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the HTML, where items is the container and the item are the elements I need on one line.</p>
  
  <pre><code>#shop {
      position: absolute;
      left: 0;
      right: 0;
      z-index: 5;
  }
  
  #shop .items {
      overflow: auto;
      height: 150px;
      white-space: nowrap;
  }
  
  #shop .item {
      margin: 20px 0;
      float: left;
      display: inline;
  }
  
  #shop .item .image {
      border-radius: 5px;
      display: inline-block;
      padding: 10px;
      width: 40%;
  }
  
  #shop .item .image img {
      margin: auto;
  }
  
  #shop .item .text {
      display: inline-block;
      width: 60%;
      padding: 5px 10px;
  }
  
  #shop .button {
      width: 100%;
      padding: 7px;
      margin: 5px 0;
  }
  
  #shop .cart {
      padding-left: 55px;
      margin: 5px 0;
      float: left;
  }
  
  #shop .cart .sep {
      height: 3px;
      margin-bottom: 5px;
  }
  </code></pre>
  
  <p>And this the CSS concerning the said elements.</p>