My inputs and labels aren't inline

Question

I know you can use display:inline but it doesn't seem to be working in this case. Maybe it has something to do with display:block for the inputs and labels.

My inputs and labels are moving down diagonally relative to one another.

See screencast: http://screencast.com/t/pFGzbRvTSy

input, label {
	display: block;
	margin-top: 5px;
	vertical-align: top;
}

input { 
	display: inline;
	float: left;
	margin-right: 10px;
}

<label for="start age">START AGE</label>
<input type="number" name="start age"></input>
	
<label for="retirement age">RETIREMENT AGE</label>
<input type="number" name="retirement age"></input>
	
<label for="current income">CURRENT INCOME</label>
<input type="number" name="current income"></input>
	
<label for="inflation">INFLATION</label>
<input type="number" name="inflation"></input>
	
<label for="monthly disability benefit">MONTHLY DISABILITY          BENEFIT</label>
<input type="number" name="monthly disability benefit"></input>

Answer 1

Yep, the explanation for this one is easy too, you have a display: inline property that gets overwritten by float: left since float: left makes your element a block again by setting display: block and applying other positioning.

One of the effects is that a floated element and a block element can exist in one line.

The other fact is that your label is display: block which will cause it to fill the entire screen width.

What happens then is the next element which is a float: left label gets pushed down one line and the label floats next to it taking up the rest of the horizontal space, this continues to create that stair effect that you're seeing.

To solve it and have the inputs and labels next to each other the best thing you could do is wrap each <input> and <label> within a <div> with a class and apply float: left to that div.

e.g.

.float-left {
    max-width: 20%; /*added this for illustration*/
    float: left;
}

label, input {
    display: block;
    padding: 4px;
}

<div class="float-left">
    <label for="start_age">START AGE</label>
    <input type="number" name="start_age" />
</div>
<div class="float-left">
    <label for="retirement_age">START AGE</label>
    <input type="number" name="retirement_age" />
</div>
<div class="float-left">
    <label for="current_income">START AGE</label>
    <input type="number" name="current_income" />
</div>
<div class="float-left">
    <label for="inflamation">START AGE</label>
    <input type="number" name="inflamation" />
</div>
<div class="float-left">
    <label for="monthly_disability_benefit">START AGE</label>
    <input type="number" name="monthly_disability_benefit" />
</div>

P.S.

I changed the for and name attributes of the fields to no longer have whitespace but using _ (underscore) characters instead - this just makes sure that your labels get understood correctly. It is usually a good idea to avoid spaces wherever you can with those kinds of things.

And as also stated in the comments, I removed the closing </input> tags as the <input /> tag is a self-closing empty tag