CSS fluid layout for inputs

CSS fluid layout for inputs

I am currently making a website and the sign up page requires:
- first name
- last name
- username
- email
- password
- retype password
I need the first name and last name inputs to be side by side and small
while the others below them are approximately twice the width. Like this:
Name
+-----------+ +-----------+
| first | | last |
+-----------+ +-----------+
Email
+----------------------------+
| |
+----------------------------+
I am extremely opposed to using px and absolutely need to use % for the
widths.
I cannot make the small inputs 50% and the large ones 100% because the
space in between the two small ones is not accounted for, you know?
I'm talking about this space:
Name
+-----------+ +-----------+
| first |<-->| last |
+-----------+ +-----------+
So that is why I can't use 50% for small ones and 100% for large ones!
Any help is greatly appreciated!