Making inputs and selects fill remaining width - html

Question

I am trying to setup a form such that:
All inputs will be horizontally aligned, even when they have no label.
Inputs will be vertically aligned within their row for when the label wraps.
The inputs will stretch to fill the remaining space (or squished)
The submit button will fill an entire row.
I have achieved the first and fourth requirements but I am having trouble with making the inputs fill the row and be vertically aligned.
Here's my progress so far:
http://jsbin.com/kozozabo/3/edit?html,css,output
The LESS:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
#narrow-form {
width: 300px;
overflow: hidden;
padding-right: 0.5em;
}
#wide-form {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin-left: 300px;
}
.row {
#label-width: 100px;
width: 100%;
overflow: hidden;
label {
width: #label-width;
float: left;
display: inline-block;
}
.no-label {
margin-left: #label-width;
}
input, select {
/* Trying to make these aligned to the right of
* their respective labels filling any remaining
* width.
*/
display: inline-block;
}
button {
width: 100%;
}
}
I tried giving the inputs absolute positioning with a left margin of the same width of the label but that didn't work.

Answer 1

Okay I have come up with a solution that I am happy with. It does involve some table abuse unfortunately.
I have only tested this in Chromium.
http://jsbin.com/kozozabo/5/edit?output
I set the form to display: table, each .row to display: table-row and the labels, inputs, selects and buttons to display: table-cell.
This made everything line up and fill all available space.
I then added two new classes intended to be affixes to the .row class, this is where the real table abuse begins.
.no-label - With the intent of "skipping" the first psuedo-cell. To accomplish this I defined it as such:
.no-label:before {
content: "";
display: table-cell;
}
Essentially inserting a hidden cell, forcing the subsequent inputs to be in the second column.
.full-width - With the intent of making it's contents the full width of the "table". To accomplish this I defined it as such:
.full-width {
display: table-caption;
caption-side: bottom;
}
A table caption spans the entire width of the table. I know I am only going to do this to the button so I forced it to be at the bottom with caption-side.
It would have been better to just define the DOM as a table but I didn't want to reprogram the javascript that was setting up this form. I always wouldn't get to of played with css, all be it in a menacing manner.