title: How to add a space (as in gutter) between flex items?
body: <p>I have two elements in my web page, let's say:</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>.host {
    display: flex;
    justify-content: spece-between;
  }
  
  .left {
    width: 300px;
    margin-bottom: 20px;
  }
  
  .right {
    width: 300px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='host'&gt;
    &lt;div class='left'&gt;&lt;/div&gt;
    &lt;div class='right'&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This puts the left and right div on the same row when the host div is wide enough. And wrap the row if the width of the host div is less than 600px.</p>
  
  <p>The thing is that I want to add a margin between the left and right div, otherwise when the width of the host is exact 600px, there is not space between the two.</p>
  
  <p>I can't simply add a <code>margin-right</code> to left div because that will make the two element have different width when the row is wrapped.</p>
  
  <p>Is there some elegant solution to achieve that?</p>
  
  <p>Thanks!</p>