How to bridge the gap between elements in a form?

Question

A form flexboxhas a space between form elements when there is a switch or checkbox. Is there any option to avoid a break, be it using a flexible 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">&nbsp;<label>Male</label></li>
      <li><input name="form" type="radio" value="1">&nbsp;<label>Female</label></li>
      <li><input name="form" type="radio" value="2">&nbsp;<label>gfdg</label></li>
      <li><input name="form" type="radio" value="3">&nbsp;<label>gfdg</label></li>
      <li><input name="form" type="radio" value="4">&nbsp;<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">&nbsp;<label>Checkbox 1</label></li>
      <li><input name="form_3" type="checkbox" value="1" checked="checked">&nbsp;<label>Checkbox 2</label></li>
      <li><input name="form_3" type="checkbox" value="2" checked="checked">&nbsp;<label>Checkbox 3</label></li>
    </ul>
  </div>
  <div><textarea rows="4" cols="30" placeholder="Coment"></textarea></div>
</form>

Run codeHide result

Answer 1

You can use columnfor this. check out the updated snippet below

form {
  width: 100%;
  float: left; 
  -webkit-column-count: 2;
    -moz-column-count: 2; 
    column-count: 2;
  column-gap: 0.5rem;
}
form > div {
  box-sizing: border-box;
  margin-bottom: 0.5rem;
  break-inside: avoid;

}
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%;
  box-sizing: border-box;
}

<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">&nbsp;<label>Male</label></li>
      <li><input name="form" type="radio" value="1">&nbsp;<label>Female</label></li>
      <li><input name="form" type="radio" value="2">&nbsp;<label>gfdg</label></li>
      <li><input name="form" type="radio" value="3">&nbsp;<label>gfdg</label></li>
      <li><input name="form" type="radio" value="4">&nbsp;<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">&nbsp;<label>Checkbox 1</label></li>
      <li><input name="form_3" type="checkbox" value="1" checked="checked">&nbsp;<label>Checkbox 2</label></li>
      <li><input name="form_3" type="checkbox" value="2" checked="checked">&nbsp;<label>Checkbox 3</label></li>
    </ul>
  </div>
  <div><textarea rows="4" cols="30" placeholder="Coment"></textarea></div>
</form>

Run codeHide result