Question

How to get the text field with auto extend based on the browser width (with pure css). For example if I scale the browser to minimum width also the text field should not jump to the second line.

I need exactly like how it is shown in this image

Answer 1

Not 100% sure it’s the desired effect but for some browsers this might be what you’re looking for:

html:

<p>
<label>Test</label>
<span><input></span>
</p>​

And css:

label{width:200px;float:left;}
span{display:block;width:100%;box-sizing:border-box;padding-left:200px;}
input{width:100%;box-sizing:border-box;}​

Example: http://jsfiddle.net/48fNt/ (works in at least chrome)

Maybe you also still need to play around with white-space:nowrap and a min-width.