title: How to align flexbox columns left and right?
body: <p>With typical CSS I could float one of two columns left and another right with some gutter space in-between. How would I do that with flexbox?</p>
  
  <p><a href="http://jsfiddle.net/1sp9jd32/" rel="noreferrer">http://jsfiddle.net/1sp9jd32/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    width: 500px;
    border: solid 1px #000;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  #a {
    width: 20%;
    border: solid 1px #000;
  }
  #b {
    width: 20%;
    border: solid 1px #000;
    height: 200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div id="a"&gt;
      a
    &lt;/div&gt;
    &lt;div id="b"&gt;
      b
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>