Html CSS中的内部表单对齐：难以对齐输入框和文本字符串

所以，我正在建立一个表格来收集个人信息。一行上有三个部分-文本字符串字段名、输入框和文本字符串解释和示例，我希望如下所示：

      First Name: INPUT BOX eg. Bob, your given name
         Surname: INPUT BOX eg. Smith, your family name
Languages Spoken: INPUT BOX eg. English, French, Chinese, 

因此，这是一个CSS问题，我还没有意识到，因为CSS对我来说是新的。我感兴趣的是获得三条垂直直线：冒号、

输入框和eg.s。最左边的边缘是参差不齐的，最右边的边缘也是参差不齐的。我想把注意力集中在中间的输入框上，并将左右文本字符串放在两侧，每个输入项一行。怎么办？原始html默认为具有不规则内部对齐的齐平左边距

谢谢你的帮助

账单

示例html：



个人资料采集器
个人资料
名字：
鲍勃，你的名字

姓：
史密斯，你的姓

名字：
鲍勃，你的名字

姓：
史密斯，你的姓


这将起作用，我认为要使输入框居中，最好先将其放在div块中，然后居中以实现响应


名字：
鲍勃，你的名字


这是另一种方法。
如果您的意思是希望输入字段垂直对齐，则可以对标签应用
显示：内联块
，并为其定义一个
最小宽度

要在
输入
框和随后的
span
框之间创建一些距离，可以对它们应用
左填充
（不过，我建议使用类来实现此目的）


标签{
显示：内联块；
最小宽度：100px；
}
模板跨度{
左：1米；
}

个人资料
名字：
鲍勃，你的名字

姓：
史密斯，你的姓

是否有任何设计可满足您的要求。请更精确地指定请注意：
要正常工作（即作为一个字段的标签，其名称位于
标签的
属性中），必须拼写正确，即不是“lable”，而是“label”。例如，这对于可访问性很重要，但对于一般的语义也很重要。