Have an element fill remaining horizontal space

Question

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.

Answer 1

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>