I have a <label> and an <input> on the same line. The contents of the label is dynamic (via PHP) so the label cannot have a fixed width. The input to the right of it needs to fill the remaining horizontal space on the line they are on together. However, simply adding width:100% to the input forces it to the next line. Is there any way to have them both remain on the same line and have the input take up all the room leftover from the label?

I have tried a few things but nothing seems to work. I have also done lots of searching but I can't seem to find any solutions to this problem.

I have considered the possibility of putting the label and input in a small table. I tried it and it does work how I want but I know that is improper use of tables so I would rather not use that. I also tried display:table-cell which also works but as most people are aware, that is not a very cross-browser friendly solution.

I suppose another possibility would be to dynamically get the width of the label via JavaScript and then add a negative left margin to the input with that but I'd really rather not rely on JavaScript for this.

Any help would be greatly appreciated. Thanks!