Css 如何解决AntD表单中的文本对齐问题

我有一个AntD模式，它有一个我正在努力对齐一些文本的表单。下面是以黄色突出显示的文本的外观。我希望它与我画红框的第一列对齐

包含“个人信息”文本和申请者表单字段的代码部分如下所示：

  <Form
    ref={this.formRef}
    {...formItemLayoutWithOutLabel}
    onFinish={onFinish}
    id="myForm"
    validateMessages={validateMessages}
    initialValues={{ applicants: [{ firstName: '' }] }}
  >
    {
      <Form.List name="applicants">
        {(fields, { add, remove }) => {
          return (
            <div>
              <Form.Item {...formItemLayout}}>
                <Row>
                  <Col span={24}>
                    Personal Information
                  </Col>
                </Row>
              </Form.Item>
              {fields.map((field, index) => (
                <Form.Item {...formItemLayout} label={`Applicant #${index + 1}`} key={field.key}>
                  <Row key={field.key} gutter={[0, 8]} justify="start">
                    <Col span={12}>
                      <Row gutter={[4, 4]}>
                        <Col span={7}>
                          <Form.Item name={[field.name, 'firstName']} fieldKey={[field.fieldKey, 'firstName']} rules={rules}>
                            <Input placeholder="First Name" ref={this.inputRef} />
                          </Form.Item>
                        </Col>

{
{（字段，{add，remove}）=>{
返回(
个人信息
{fields.map（（字段，索引）=>(

我想如果我将标签设置为空白，它可能会在表单项上实现我想要的功能，但当然，冒号仍然存在，这是我不想要的。所以我猜这不是实现这一功能的正确方法，也许还有更好的CSS路线

我正在寻找如何获得我想要的一致性的帮助。最终，我还希望将“雇主信息”与雇主信息上方的右栏对齐

编辑#1

在此添加此问题的简化代码沙盒。感谢您的任何想法

---

有一个

表单选项。Item

可以在

标签后面显示冒号。您可以将其签出

禁用它将实现你想要的

<Form.Item {...formItemLayout} label=" " colon={false}>
  <Row gutter={[0, 8]} justify="start">
    <Col span={12}>Personal Information</Col>
    <Col span={12}>Employer Information</Col>
  </Row>
</Form.Item>


个人信息
雇主资料
如果您可以使用以下方法复制演示，我可以提供帮助：添加一个codesandbox，演示正在发生的事情。