With my status plugin, I'd generally like the input element to take up the whole line, or at least the part that's not taken up by the prompt and by other messages. Evidently, that's a common concern, with a pure CSS solution that relies on overflow: hidden to create a new block formatting context that makes width: 100% mean "100% of the space not taken up by floats".
So the solution is to make sure that everything that is not the input element is floated, and that the input element is wrapped with an element that is display: block and overflow: hidden, and the input element is width: 100% (and box-sizing: border-box to make sure the border doesn't overflow).
It's unfortunate that we need the non-semantic wrapper to set the size that the input can be 100% of, but I don't see another option. It also requires that the floated elements come before the input element in the DOM, so my status plugin has to use prependTo for messages and appendTo for the input element.
As an example (the text is all editable):
<div>
<span style="float: left" contenteditable>Prompt String:</span>
<span style="float: right; color: red" contenteditable>Important Message</span>
<span style="overflow: hidden; display: block; padding: 0 1em"> <!-- the padding isn't essential; it's just decorative -->
<input style="width: 100%; box-sizing: border-box; -moz-box-sizing: border-box"/>
</span>
</div>
Leave a Reply