Input should have the maximum width possible

Question

I have a similar HTML structure like this Fiddle: http://jsfiddle.net/hAMmK/3/

The HTML structure:

<span class="all">
     <span class="group-1">
         <span class="a">A</span>
         <span class="b"><input type="text" placeholder="b" /></span>
     </span>
     <span class="group-2">
         <span class="c">C</span>
         <span class="d">D</span>
     </span>  </span>

The current result with the css is

but my desired result would be

This result should be responsive, I mean, the width for the input text should be the maximum with the correct current width of the device/browser. Furthermore, I need compatibility with the most common browsers (as desktop as mobile/tablet).

What is the best way to solve this?

Answer 1

Use CSS3 Calc: Running Demo

input[type="text"]{        
    width: calc(100% - 100px);
}

Not (yet) supported everywhere, though, and you need to know the width to subtract.