Align input on current line at specific position in CSS [duplicate] - html

Question

This question already has answers here:
Align labels in form next to input
(8 answers)
Closed 5 years ago.
I am trying to create a settings page in HTML/CSS. I have a rounded corner div with some text and an input box inside.
I want to align the input boxes as seen in the image below with the red line. Is there a way in CSS to push the input boxes over and have them line up in each div?
CSS
.mainItem {
background-color: white;
color: #38434e;
padding: 10px;
border-radius: 10px;
margin-bottom: 10px;
border: 1px solid #d6d9e5;
}
.pageInput {
position: absolute:
left: 200px;
}
HTML
<div class="mainItem">Business Name<input type="text" class="pageInput"></div>
<div class="mainItem">Address<input type="text" class="pageInput"></div>
Bhuwan's solution doesn't work and looks like this:

Answer 1

I would put your text in a label and give that a width:
.mainItem {
background-color: white;
color: #38434e;
padding: 10px;
border-radius: 10px;
margin-bottom: 10px;
border: 1px solid #d6d9e5;
}
.mainItem>label {
display: inline-block;
width: 150px;
}
<div class="mainItem"><label for="input1">Business Name</label><input type="text" id="input1" class="pageInput"></div>
<div class="mainItem"><label for="input2">Address</label><input type="text" id="input2" class="pageInput"></div>
Labels make your form more accessible too as you can now click on the label to focus your input

Answer 2

Firstly, you don't need position absolute for this. Second, use labels for your input fields and give them the same width:
<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>
In the CSS:
.mainItem label {
width: 20%;
display: inline-block;
}