HTML表单字段名和输入字段未正确对齐

我正在尝试创建一个表单，其中包含一些用户要填写的字段。字段名称及其输入字段之间没有完全对齐，导致用户在填写表单时遇到困难，因为这会造成输入框用于哪个字段的混淆。我甚至试着把表单元素放在一个表中，但是它破坏了UI，因为整行都包含了字段名和输入框，看起来很难看。随函附上屏幕截图

派送日期：*
客户名称：*
卡车编号：*

---

有更多的字段，表单标签在末尾关闭。

也许一些

页边距顶部

和

页边距底部

会使表单更具可读性。

使用flexbox作为包装将它们完美地对齐

输入{
填充：.5em；
}
.集装箱{
宽度：50%；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
边缘底部：.5em；
}
.容器：第n个子（1）标签{
自对齐：柔性端；/*垂直对齐底部*/
背景：浅蓝色；
}
.容器：第n个子（2）标签{
自对齐：居中；/*垂直居中对齐*/
背景：粉红色；
}
.容器：第n个子（3）标签{
自对齐：柔性开始；/*垂直对齐顶部*/
背景：浅绿色；
}

客户名称
邮政编码
放置

您的代码在哪里？请共享您的代码，以便我们检查如何垂直居中标签文本当前，标签在中心垂直对齐。我已经调整了代码，以便您可以看到如何在顶部或底部对齐。

<form action="http://203.115.101.30/kpmProcess/index.php/support/form_NewDeviceAddition" method="post" accept-charset="utf-8">
    <form data-toggle="validator" method="post"  name="myformlisting"  id="myformlisting" class="form form-horizontal" >
        <table width="100%">
            <tr>

              <div class="form-group">
                  <td colspan="2">
                <label class="col-sm-3 control-label" for="form-control-2"  >Dispatch Date:*</label>
                  </td>
                  <td colspan="2">
                <div class="col-sm-9">
                  <input type="text" class="form-control" name="date" id="datepicker1" value="" required />
                </div>
                  </td>
              </div>
        </tr>
        </table>
              <div class="form-group">
                <label class="col-sm-3 control-label" for="form-control-3">Customer Name:*</label>
                <div class="col-sm-9">
                  <input type="text"  class="form-control" name="customer_name" id="customer_name_id" required >
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label" for="form-control-4">Truck No:*</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" name="truck_no" id="truck_no_id" required >
                </div>
              </div>