表单布局用Grid还是Flex更合适？

我在写一个用户信息编辑的表单，想让标签和输入框对齐整齐，但用Flex总觉得控制不好间距和换行。试过用Grid，但又担心兼容性问题。大家一般怎么处理这种两列布局的表单？

这是我现在用Flex写的结构，效果不太理想：

const UserForm = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <label style={{ width: '80px' }}>姓名</label>
      <input style={{ flex: 1 }} />
    </div>
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <label style={{ width: '80px' }}>邮箱</label>
      <input style={{ flex: 1 }} />
    </div>
  </div>
);