Hold an element in the remaining horizontal space
I was asked to create a form where each entrance has a label at its natural width (left) and an entrance side by side (right, in the same line), filling in the remaining space so that the right edge of each entrance is vertically aligned.
Besides setting an explicit width on each input, is there a way to achieve this? Essentially, forcing the entrance to accept 100% of its parent's remaining space?
None of the answers for How do I make a div fill the remaining horizontal space? seems 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 above situation, I want each wrapping div to be 100% width and the elements inside to fill that width completely without any space in between.
+3
source to share
1 answer
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>
+6
source to share