title: How to divide a section with two articles in equal width?
body: <p>I'm trying to divide a section that holds two articles inside, which must have equal width using borders and have a slight separation between them. Final objective is to have those two articles inside a section and next to it an aside.</p>
  
  <p>I can't seem to make the articles have equal width and at the same time use borders and a separation between them.</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>section.sec2 {
    border: solid;
    margin-top: 5px;
    float: left;
    overflow: hidden;
    width: 84%;
    background-color: white;
    padding: 5px;
  }
  section.sec3 {
    width: 50%;
    float: left;
    margin-right: 5px;
  }
  section.sec4 {
    display: inline-block;
    width: 50%;
    margin-right: -330px;
  }
  article.ar1 {
    background-color: orange;
    border: solid;
    width: 100%;
    padding: 10px;
  }
  article.ar2 {
    background-color: red;
    float: left;
    width: 100%;
    border: solid;
    padding: 10px;
  }
  aside.as1 {
    background-color: purple;
    float: left;
    width: 200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="sec2"&gt;
    &lt;section class="sec3"&gt;
      &lt;article class="ar1"&gt;Ar1&lt;/article&gt;
    &lt;/section&gt;
    &lt;section class="sec4"&gt;
      &lt;article class="ar2"&gt;Ar2&lt;/article&gt;
    &lt;/section&gt;
  &lt;/section&gt;
  
  &lt;aside class="as1"&gt;Aside&lt;/aside&gt;</code></pre>
  </div>
  </div>
  </p>