title: Css flexbox gutter with spacing
body: <p>I'm trying to inline 3 items on 1 row. Every item must have a bit of space. The problem is when I add margin
  the third item will wrap. I already tried to add negative margin 
  to the parent but that's not working. </p>
  
  <p>I made an example with my problem the example is using <a href="https://tailwindcss.com/" rel="nofollow noreferrer">tailwindcss</a>:</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"&gt;
  
    &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="flex flex-wrap -m-2"&gt;
    &lt;div class="bg-red-500 w-1/3 p-4 m-2"&gt;
      test
    &lt;/div&gt;  
    
     &lt;div class="bg-red-500 w-1/3 p-4 m-2"&gt;
      test
    &lt;/div&gt; 
    
     &lt;div class="bg-red-500 w-1/3 p-4 m-2"&gt;
      test
    &lt;/div&gt; 
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I cannot remove <code>flex-wrap</code> because it has to wrap every 3 items, and I cannot use <code>padding</code>. </p>
  
  <p>How can I get this to work?</p>