Align input on current line at specific position in CSS

Question

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:

The proposed duplicate and the solution to it are based on a right aligned form. Not sure if you can see the attached picture. It clearly shows the text aligned on the left and the input fields not possibly right aligned as the div span the whole line. — SystemX17, Feb 16 '18 at 11:50

score 2 · Accepted Answer · answered Feb 16 '18 at 11:16

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

This worked perfectly and proves it wasn't a duplicate as the solution wouldn't have worked in the proposed duplicate. Thanks. — SystemX17, Feb 16 '18 at 11:55

score 0 · Answer 2 · answered Feb 16 '18 at 11:16

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;
}

Align input on current line at specific position in CSS

2 Answers2