html - inline form elements with flex -

this question has answer here:

• flexbox not working on button or fieldset elements 2 answers

i trying create form @ moment, ideally flex responds number of inputs group,

so have form setup this:

<fieldset class="form__group">      <input type="text" class="form_input" />      <input type="text" class="form_input" />  </fieldset>  <fieldset class="form__group">      <input type="text" class="form_input" />      <input type="text" class="form_input" />      <input type="text" class="form_input" />  </fieldset>  <fieldset class="form__group">      <input type="text" class="form_input" />  </fieldset> 

what trying achieve container not care how many children has allow them fill available space evenly in single row.

so 2 items 50% (minus margins/padding), 3 items 33.3% , 1 item 100% etc etc etc,

my css looks this,

.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; } 

which thought allow me put children inline on same row , allow flex sort out widths , spacing?

here wip @ moment,

https://codepen.io/87development/project/editor/aonjzn/

so using flex how can create row of inline form inputs equally spaced , widthed, without knowing how many elements may in each form__group?

fieldset can present issues rendering...use div instead.

fieldset @ mdn

* {    box-sizing: border-box;  }    .form__group {    display: flex;  }    .form_input { /* note single underscore */    flex: 1;    background: lightgrey;    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;  }

<div class="form__group">    <input type="text" class="form_input" />    <input type="text" class="form_input" />  </div>  <div class="form__group">    <input type="text" class="form_input" />    <input type="text" class="form_input" />    <input type="text" class="form_input" />  </div>  <div class="form__group">    <input type="text" class="form_input" />  </div>