How to make labels go next to input boxes in CSS -

i have form on website in have aligned input box right, make form neat , orderly.

however time set form to

input[type=text]{align:right} 

the labels bunch @ top of form. problem on jsfiddle..:

http://jsfiddle.net/4hx4g/

if knows how fix annoying problem or can point me in right direction, please do. thank you.

simply define display inline-block, , define width label:

label, input[type=text] {     display: inline-block; }  label {     width: 10em;     /* other css unchanged */ } 

js fiddle demo.

the use of inline-block allow elements display inline (so next each other on same line), also allow them have defined with. input is, typically, inline-block default, can, similarly, away adding following 2 lines label declaration:

label {     display: inline-block;     width: 10em;     /* other css unchanged */ } 

js fiddle demo.

retaining above css, remove presentational <br /> tags, , use css:

label, input {     float: left; }  input[type=text] + label {     clear: left; } 

js fiddle demo.

note, also, input element void/empty element; , self-closing: <input />, not <input></input>, final demo corrects html, first 2 left uncorrected (and, honestly, unnoticed).