How do make a variable-width input field - html

Question

I am trying to make the label and input field appear on the same line, with a variable width input field that will expand based on the space available
http://jsfiddle.net/chovy/WcQ6J/
<div class="clearfix">
<aside>foo</aside>
<span><input type="text" value="Enter text" /></span>
</div>
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
div {
border: 1px solid red;
}
aside {
display: block;
width: 100px;
background: #eee;
float: left;
}
span {
display: block;
width: 100%;
background: #ccc;
}
input {
width: 100%;
box-sizing: border-box;
border: 1px solid #000;
}
It works fine with a span, but when I add input it wraps to next line.

Answer 1

Here is some whacky solution. I honestly don't really understand why this works. I had it in an old codepen. Good luck!
http://jsfiddle.net/sheriffderek/DD73r/
HTML
<div class="container">
<div class="label-w">
<label for="your-input">your label</label>
</div>
<div class="input-w">
<input name="your-input" placeholder="your stuff" />
</div>
</div> <!-- .container -->
CSS
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 100%;
float: left;
height: 2em;
}
.label-w {
width: 8em;
height: 100%;
float: left;
border: 1px solid red;
line-height: 2em;
}
.input-w {
float: none; /* key */
width: auto; /* key */
height: 100%;
overflow: hidden; /* key */
border: 1px solid orange;
}
.input-w input {
width: 100%;
height: 100%;
}

Answer 2

You could use the CSS calc property to determine the width minus the borders and aside width:
input {
width: calc(100% - 102px); /* 100% minus (aside width (100px) + border width (2px)) */
box-sizing: border-box;
border: 1px solid #000;
}
FIDDLE

Answer 3

You could use display: table-*:
div {
display: table;
width: 100%;
background-color: #ccc;
}
aside {
display: table-cell;
width: 100px;
background: #eee;
}
span {
display: table-cell;
background: #bbb;
}
input {
display: block;
width: 100%;
background-color: #ddd;
}
http://jsfiddle.net/userdude/WcQ6J/5/
This is a little bit more compatible (and flexible) that display: inline-block, which is not supported in IE8.

Answer 4

You can set the width of the "aside" to pixels and the span to a percent, but, as you've seen, that will cause problems. It's easier to set both to a percent. Also, "inline-block" will put your elements in line. You can use this or "float: right;", but I prefer setting the display.
aside {
display: inline-block;
width: 9%;
}
span {
display: inline-block;
width: 90%;
}
See jsfiddle.

Answer 5

In case you want a truly variable width input field, so that you can manually adjust its width to fill the entire page, or to any other convenient width, why not make that input element fill 100 % of a resizable div?
CSS:
<style>
div.resize {
width: 300px; /*initial width*/
resize: horizontal;
overflow: auto;
}
HTML:
<div class="resize">
<input style="width: 100%" />
The little triangle to drag to resize the div will appear in the lower-right corner of the input element!