如何创建一个两列的布局表单？

<form>
  <div class="form-column">
    <label for="field1">字段1：</label>
    <input type="text" id="field1" name="field1">
    
    <label for="field3">字段3：</label>
    <input type="text" id="field3" name="field3">
  </div>

  <div class="form-column">
    <label for="field2">字段2：</label>
    <input type="text" id="field2" name="field2">
    
    <label for="field4">字段4：</label>
    <input type="text" id="field4" name="field4">
  </div>
</form>

.form-column {
  float: left;
  width: 50%;
  box-sizing: border-box;
  padding: 10px;
}

form {
  display: flex;
}

.form-column {
  flex: 1;
  box-sizing: border-box;
  padding: 10px;
}