My inputs and labels aren't inline - html

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

Answer 2

Oops sorry, I looked at the screencast and saw what you needed so I added that as well. (See second snippet at the bottom of this answer).
1 - 6 still apply.
In addition:
Add a <br/> after the text of the <label>
There's no closing tag for <inputs/> </input>
If you place your <inputs> inside your <label>, the text will line up in conjunction with vertical-align: baseline (see below)
I believe the for attribute targets id only, for doesn't associate with name.
float: left deleted, floats are archaic and delicate. If used incorrectly, they cause a horrific illogical mess of layouts (as it already has done to yours).
Made the width of inputs to the size of expected content (don't need 15 digits for age).
As a matter of aesthetics, don't use upper caps, I added a touch of class by using font-variant: small-caps ;-)
Relevant CSS
label {
display: inline-block;
margin: 5px;
vertical-align: baseline;
line-height: 1.5;
font-size: 16px;
font-variant: small-caps;
}
input {
display: inline-block;
line-height: 1.5;
padding: 0 3px;
}
I know this demo is just a demo, but if you get in the habit of doing little things, it becomes second nature and won't slow you down.
label {
display: inline-block;
margin: 5px;
vertical-align: baseline;
line-height: 1.5;
font-size: 16px;
font-variant: small-caps;
}
input {
display: inline-block;
line-height: 1.5;
padding: 0 3px;
}
#startAge {
width: 32px;
}
#retirementAge {
width: 32px;
}
#currentIncome {
width: 84px;
}
#inflation {
width: 64px;
}
#monthlyDisabilityBenefit {
width: 84px;
}
<label for="startAge">Start Age
<input type="number" id="startAge"></label>
<label for="retirementAge">Retirement Age
<input type="number" id="retirementAge"></label>
<br/>
<label for="currentIncome">Current Income
<input type="number" id="currentIncome"></label>
<br/>
<label for="inflation">Inflation
<input type="number" id="inflation"></label>
<br/>
<label for="monthlyDisabilityBenefit">Monthly Disability Benefit
<input type="number" id="monthlyDisabilityBenefit"></label>
label {
display: inline-block;
font-variant: small-caps;
}
input {
width: 185px;
}
<label for="startAge">Start Age
<br/>
<input type="number" id="startAge">
</label>
<label for="retirementAge">Retirement Age
<br/>
<input type="number" id="retirementAge">
</label>
<label for="currentIncome">Current Income
<br/>
<input type="number" id="currentIncome">
</label>
<label for="inflation">Inflation
<br/>
<input type="number" id="inflation">
</label>
<label for="monthlyDisabilityBenefit">Monthly Disability Benefit
<br/>
<input type="number" id="monthlyDisabilityBenefit">
</label>

Answer 3

i hope it will help i also added <br> tag with every line to get the the text box and label vertical
input, label {
margin-top: 5px;
}
input {
display: inline;
margin-right: 10px;
}
<label for="start age">START AGE</label><br>
<input type="number" name="start age"></input><br><br>
<label for="retirement age">RETIREMENT AGE</label><br>
<input type="number" name="retirement age"></input><br><br>
<label for="current income">CURRENT INCOME</label><br>
<input type="number" name="current income"></input><br><br>
<label for="inflation">INFLATION</label><br>
<input type="number" name="inflation"></input><br><br>
<label for="monthly disability benefit">MONTHLY DISABILITY BENEFIT</label><br>
<input type="number" name="monthly disability benefit"></input><br><br>