У меня есть простая форма ввода регистрации (хамл для краткости здесь :)

%form#signup
  %fieldset
    %input.email{type:'text'}
    %br
    .name
      %input.first-name{type:'text'}
      %input.last-name{type:'text'}

и CSS:

#signup { width: 350px; }
fieldset { width: 100%; }
.name { width: 100%; }
.first-name { width: 30%; }
.last-name { /* occupy remainder of 'name' line */ }

Как оформить это так, чтобы.email поле является полной ширинойfieldset и.last-name и / или.first-name поля расширяются, чтобы также заполнить всю ширинуfieldset и с правым краем, выровненным с.email поле?

Да, это может быть проще использоватьtable здесь, но есть ли простой способ с CSS? Он должен работать только для браузеров, совместимых с css3, и разумно ухудшаться для IE8 и 9.

скриптовая ссылка:http://jsfiddle.net/3UP9H/1