title: Proper float css grid
body: <p>If I have css floated grid like this </p>
  
  <pre><code>.float {
    float: left;
    width: 45%;
    border: 1px solid black;
    margin: 1%;
    padding: 1%;
  }
  </code></pre>
  
  <p>How can I force each new line to be aligned at same horizont level? </p>
  
  <p><a href="http://codepen.io/anon/pen/Kzezjp?editors=1100" rel="nofollow">http://codepen.io/anon/pen/Kzezjp?editors=1100</a></p>