title: How to display a list of divs in two columns without extra vertical space
body: <p>With below snippet, there appears extra spaces on left side between divs.
  Is it possible to create two columns without altering the HTML schema? Each <code>child</code> can have dynamic content hence dynamic vertical space.I am trying to fiddle with different CSS combinations for <code>parent</code> and child.</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>.parent{
  
  }
  
  .child{
    display:flex;
    float:left;
    width: 48%;
    padding: 3px;
    border: 1px solid red;
    background-color: gray;
  }
  
  
  /** Ignore below */
  .child1{
    background-color: green;
  }
  .child2{
    background-color: blue;
  }
  .child3{
    background-color: darkblue;
  }
  .child4{
    background-color: lightgreen;
  }
  .child5{
    background-color: yellow;
  }
  .child6{
    background-color: #989898;
  }
  .child7{
    background-color: #545454;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
    &lt;div class="child child1"&gt;Child 1 text here Child 1 text here Child 1 text here Child 1 text here 
    &lt;/div&gt;
    &lt;div class="child child2"&gt;Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here Child 2 text here 
    &lt;/div&gt;
    &lt;div class="child child3"&gt;Child 3 text here Child 3 text here Child 3 text here Child 3 text here Child 3 text here Child 3 text here 
    &lt;/div&gt;
    &lt;div class="child child4"&gt;Child 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text hereChild 4 text here 
    &lt;/div&gt;
    &lt;div class="child child5"&gt;Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here Child 5  text here 
    &lt;/div&gt;
    &lt;div class="child child6"&gt;Child 6  text here Child 6  text here Child 6  text here Child 6  text here 
    &lt;/div&gt;
    &lt;div class="child child7"&gt;Child 7  text here 
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>