Flex display and width of child elements not working

Question

I am developing a form, however, an error occurred on the page, the elements stay with a margin until the end of the width of the parent div, even if setting a margin 0 and a width less than 50% (that would divide to 2 or more elements online)

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  outline:none;
  text-decoration:none;
  list-style:none;
  font-family:"Aileron-Regular",sans-serif;color:#fff;
}
form *{
  color:#000;
}
fieldset{
  border:none;
}
label,input,textarea,select,option{
  width:100%;margin:0;
}
textarea{
  resize:none;
  height:60px;
}
button{
  font-size:1.2em;
  padding:6px 18px;
  text-transform:uppercase;
  font-family:"Cabin-Medium",sans-serif;
  background-color:rgba(0,0,0,.2);
  border:1px solid #fff;
  width:100%;
  min-width:120px;
  max-width:160px;
}
.mini-inputs{
  display:inline-flex;
}
.mini-inputs label{
  width:47.368421052631575%;
}

<fieldset class="mini-inputs"><!-- mini-inputs -->
    <label>Data do evento:
        <input type="date" name="">
    </label>
    <label>Valor:
        <input type="number" name="">
        <div>
            <span class="fa fa-info-circle"></span>
            <p>Digite aqui sua proposta de pagamento</p>
        </div>
    </label>
    <label>Estado:
        <select>
            <option selected disabled>Selecione...</option>
        </select>
    </label>
    <label>Cidade:
        <select>
            <option selected disabled>Selecione...</option>
        </select>
    </label>
</fieldset>

How can I solve the problem?

Answer 1

Replace these two roles in your CSS:

label,input,textarea,select,option{
  margin:0;
}

.mini-inputs{
  display:inline-table;
  width: 100%;
}