Enter to fill in the remaining label width

Question

I am trying to do the following in HTML:

• input inside a label element (instead of using identifiers and labels for)
• entrance should occupy 100% of the remaining width

It should not be so difficult, but I tried many approaches from other examples; the use of floats, overflow: hidden, limiting the height of surrounding elements, etc. It does not have a width of 100%, but this is not an option.

The reason I probably don't use label-for (which works) is because there will be several identical input fields on the same page. They are quite complex, so I create them manually and then clone it using jQuery N times, which would then be terribly broken when using identifiers.

Base starting point:

input {
  width: 100%;
}

<label>
  name:
  <input type="text" />
</label>

Run codeHide result

: https://jsfiddle.net/8uuhhcon/

Answer 1

Flexbox

label {
  display: flex;
}

input {
  flex: 1;
}

<label>name:
  <input type="text" />
</label>

Hide result

Answer 2

: , <span>name:</span>, CSS.

label {
  width: 100%;
  display: table;
}
span, input {
  display: table-cell;
}
span {
  width: 1%; /*give a small value*/
  white-space: nowrap; /*prevent wrapping i.e. "user name"*/
  vertical-align: middle; /*or top/bottom as needed*/
}
input {
  width: 99%; /*give a large value*/
}

<label>
  <span>name:</span>
  <input type="text" />
</label>

Hide result