Html 将当前行上的输入对齐到CSS中的特定位置

我正在尝试用HTML/CSS创建一个设置页面。我有一个圆角div，里面有一些文本和一个输入框

我想将下图中的输入框与红线对齐。CSS中有没有一种方法可以将输入框推过来，并使它们在每个div中对齐

CSS

HTML

企业名称
地址

Bhuwan的解决方案不起作用，看起来是这样的：

---

我会把你的文字放在标签上，并给它一个宽度：

.main项目{
背景色：白色；
颜色：#38434e；
填充：10px；
边界半径：10px；
边缘底部：10px；
边框：1px实心#d6d9e5；
}
.main项目>标签{
显示：内联块；
宽度：150px；
}

企业名称
地址

我会把你的文字放在标签上，并给它一个宽度：

.main项目{
背景色：白色；
颜色：#38434e；
填充：10px；
边界半径：10px；
边缘底部：10px；
边框：1px实心#d6d9e5；
}
.main项目>标签{
显示：内联块；
宽度：150px；
}

企业名称
地址

首先，不需要绝对位置。其次，为输入字段使用标签，并使其具有相同的宽度：

<div class="mainItem">
  <label for="input1">Name </label> 
  <input type="text" class="pageInput" id="input1">
</div>
<div class="mainItem">
  <label for="input2">Address</label> 
  <input type="text" class="pageInput" id="input2">
</div>

---

首先，你不需要绝对位置。其次，为输入字段使用标签，并使其具有相同的宽度：

<div class="mainItem">
  <label for="input1">Name </label> 
  <input type="text" class="pageInput" id="input1">
</div>
<div class="mainItem">
  <label for="input2">Address</label> 
  <input type="text" class="pageInput" id="input2">
</div>

---

建议的副本及其解决方案基于右对齐表单。不确定您是否能看到所附图片。它清楚地显示文本在左边对齐，输入字段不可能右对齐，因为div跨越整行。建议的副本和解决方案基于右对齐形式。不确定您是否能看到所附图片。它清楚地显示了文本在左边对齐，输入字段不可能在右边对齐，因为div跨越了整行。这非常有效，并证明它不是重复的，因为解决方案在建议的重复中不起作用。谢谢。这非常有效，并且证明了它不是重复的，因为解决方案在建议的重复中不起作用。谢谢

<div class="mainItem">
  <label for="input1">Name </label> 
  <input type="text" class="pageInput" id="input1">
</div>
<div class="mainItem">
  <label for="input2">Address</label> 
  <input type="text" class="pageInput" id="input2">
</div>

.mainItem label {
  width: 20%;
  display: inline-block;
}