title: How can i position an <article> right beside another <article> so that I can have them horizontally?
body: <p>I've encountered a problem where I need to put two different <code>&lt;article&gt;</code>s on the same line or horizontally aligned, with the FirstArticle on the left with its width and the SecondArticle on the right of the FirstArticle with its own width.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.MainContent {
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      overflow: hidden;
      line-height: 30px;
  }
  
  .Content {
      float: left;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      width: 48%;
  }
  
  .FirstArticle {
      margin-left: 10px;
      margin-top: 30px;
  }
  
  .SecondArticle {
      margin-left: 10px;
      margin-top: 30px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="MainContent"&gt;
      &lt;div class="Content"&gt;
          &lt;article class="FirstArticle"&gt;
              &lt;header class="Header"&gt;
                  &lt;h2&gt;First Article&lt;/h2&gt;
              &lt;/header&gt;
              &lt;footer class="Footer"&gt;
                  &lt;p class="post-info"&gt;some text for the footer..
                  &lt;/p&gt;
              &lt;/footer&gt;
              &lt;content&gt;
                  &lt;p&gt;&lt;q&gt;All good people agree,
       And all good people say,
       All nice people, like Us, are We
       And every one else is They:
       But if you cross over the sea,
       Instead of over the way,
       You may end by (think of it!)
                      looking on We
       As only a sort of They!&lt;/p&gt;&lt;/q&gt;
              &lt;/content&gt;
          &lt;/article&gt;
          &lt;article class="SecondArticle"&gt;
              &lt;header class="2Header"&gt;
                  &lt;h2&gt;Second Article&lt;/h2&gt;
              &lt;/header&gt;
              &lt;footer class="Footer"&gt;
                  &lt;p class="post-info"&gt;some text for the footer..
                  &lt;/p&gt;
              &lt;/footer&gt;
              &lt;content&gt;
                  &lt;p&gt;&lt;q&gt;All good people agree,
       And all good people say,
       All nice people, like Us, are We
       And every one else is They:
       But if you cross over the sea,
       Instead of over the way,
       You may end by (think of it!) looking 
                      on We
       As only a sort of They!&lt;/p&gt;&lt;/q&gt;
              &lt;/content&gt;
          &lt;/article&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>