title: CSS two divs next to each other (w/o line break)
body: <p>I want to put 2 <code>&lt;div&gt;s</code> next to each other. How can I do this?
  Both should be 50% width. Can someone help correct my code?</p>
  
  <p>This is the code:</p>
  
  <pre><code>    &lt;hr class="hr--small"&gt;
      &lt;div class="grid"&gt;
  
      &lt;div class="grid__item text-left"&gt;
        &lt;p class="site-footer__links"&gt;{{ 'layout.footer.copyright' | t }} &amp;copy; 
        {{ 'now' | date: "%Y" }} {{ shop.name | link_to: '/' }} • All Rights Reserved
        &lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="grid__item text-right"&gt;
        &lt;p class="site-footer__links"&gt;
          &lt;a href="http://www.w3schools.com/html/"&gt;Privacy Policy&lt;/a&gt; •                               
          &lt;a href="http://www.w3schools.com/html/"&gt;Terms &amp; Conditions&lt;/a&gt;
        &lt;/p&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>At the moment they appear correctly left &amp; right, but with line break. Just want them to appear on the same line.</p>