The flexbox form has gap in between form items when there is radio button or checkbox. Is there any option to avoid the gap whether using flex or any other method?
form {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
form>div {
box-sizing: border-box;
padding: 0.5rem;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
}
form>div input:not([type=checkbox]):not([type=radio]),
form>div textarea {
background-color: rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 0.25rem;
min-height: 40px;
width: 100%;
}<form>
<div><input placeholder="First Name" /></div>
<div><input placeholder="Last Name" /></div>
<div>
<ul class="radio_list">
<li><input name="form" type="radio" value="0"> <label>Male</label></li>
<li><input name="form" type="radio" value="1"> <label>Female</label></li>
<li><input name="form" type="radio" value="2"> <label>gfdg</label></li>
<li><input name="form" type="radio" value="3"> <label>gfdg</label></li>
<li><input name="form" type="radio" value="4"> <label>gfd</label></li>
</ul>
</div>
<div><input placeholder="Phone" type="phone" /></div>
<div><input placeholder="Email" type="email" /></div>
<div>
<ul class="checkbox_list">
<li><input name="form_3" type="checkbox" value="0" checked="checked" required="required"> <label>Checkbox 1</label></li>
<li><input name="form_3" type="checkbox" value="1" checked="checked"> <label>Checkbox 2</label></li>
<li><input name="form_3" type="checkbox" value="2" checked="checked"> <label>Checkbox 3</label></li>
</ul>
</div>
<div><textarea rows="4" cols="30" placeholder="Coment"></textarea></div>
</form>