How do make a variable-width input field

css, html

Solution

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%;
}

Problem

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.

Original source