title: inline form elements with flex
body: <p>I am trying to create a form at the moment, that ideally with flex responds to the number of inputs with a group,</p>
  
  <p>So I have a form setup like this: </p>
  
  <pre><code>&lt;fieldset class="form__group"&gt;
       &lt;input type="text" class="form_input" /&gt;
       &lt;input type="text" class="form_input" /&gt;
   &lt;/fieldset&gt;
   &lt;fieldset class="form__group"&gt;
       &lt;input type="text" class="form_input" /&gt;
       &lt;input type="text" class="form_input" /&gt;
       &lt;input type="text" class="form_input" /&gt;
   &lt;/fieldset&gt;
   &lt;fieldset class="form__group"&gt;
       &lt;input type="text" class="form_input" /&gt;
   &lt;/fieldset&gt;
  </code></pre>
  
  <p>What I am trying to achieve is that the container does not care how many children it has but will allow them to fill the available space evenly in a single row.</p>
  
  <p>So 2 items get 50% (minus a but for margins/padding), 3 items get 33.3% and 1 item 100% etc etc etc, </p>
  
  <p>My CSS looks like this, </p>
  
  <pre><code>.form__group {
      display: flex;
  }
  
  .form__input {
      flex: 1 1 0;
      background: #fff;
      color: #939598;
      border-radius: 30px;
      box-shadow: none;
      border: 1px solid #f1f2f2;
      padding-left: 15px;
      height: 34px;
      padding: 6px 12px;
      font-size: 14px;
      line-height: 1.42857143;
  }
  </code></pre>
  
  <p>Which I thought would allow me to put children inline on the same row and allow flex to sort out widths and spacing?</p>
  
  <p>Here is my WIP at the moment, </p>
  
  <p><a href="https://codepen.io/87Development/project/editor/AoNJzN/" rel="nofollow noreferrer">https://codepen.io/87Development/project/editor/AoNJzN/</a></p>
  
  <p>So using flex how can create a row of inline form inputs that are equally spaced and widthed, without knowing how many elements may be in each <code>form__group</code>?</p>