CODEWITHSUNDEEP
htmlcsswidth
rushtoni88
rushtoni88

Reputation: 4665

Have an element fill remaining horizontal space

I have been asked to create a form where each input has a label at its natural width (to the left) and the input alongside (on the right, within the same row) filling the remaining space so that the right edge of each input is vertically aligned.

Other than setting an explicit width on each input is there a way of achieving this? In essence, forcing the input to take up 100% of the remaining space of its parent?

None of the answers for How to make a div to fill a remaining horizontal space? seem to work for me but I'm not sure why my situation would be different.

<div class="name-field">
     <label for="name">Name:</label>
     <input type="text" id="name" />
</div>

<div class="email-field">
     <label for="email">Email address:</label>
     <input type="email" id="email" />
</div>

In the situation above I want each wrapping div to be 100% width and the elements within to fill that width entirely without any space between them.

Upvotes: 4

Views: 3731

Answers (1)

sol
sol

Reputation: 22919

One approach is to use flexbox:

div {
  display: flex;
}

div input {
  flex: 1;
}
<div class="name-field">
     <label for="name">Name:</label>
     <input type="text" id="name" />
</div>

<div class="email-field">
     <label for="email">Email address:</label>
     <input type="email" id="email" />
</div>

Upvotes: 9

Related Questions