html - Floating label on top inputs -

i trying float label on top of input it's not working correctly? maybe messed css? appreciated, thanks!

heres looks @ moment: http://prntscr.com/37hw30

html:

<form id="loginformitem" name="loginformitem" method="post" style="float:right">      <label for="username">username</label>     <input type="text" name="log_username" class="logintext"  id="username" placeholder="username" style="margin-left:100px">          <label for="password">password</label>      <input type="password" name="log_password" class="logintext" id="password" placeholder="password">           <button type="submit" class="loginbutton" name="login" >login now</button>       </form> 

css:

.logintext {     margin-right: 10px;     border: 2px solid rgba(0,0,0,0); border-radius: 2px; padding: 2px 2px 3px 2px; font-size: 13px; color: #222; }  form label { font-size: 13px; font-weight: bold; color: #a4c0d7; } 

you can wrap label & input <p> or <span> displayed inline-block.

input can displayed block break line.

html

<form id="loginformitem" name="loginformitem" method="post" >   <span>     <label for="username">username</label>     <input type="text" name="log_username" class="logintext"  id="username" placeholder="username" >   </span>   <span>     <label for="password">password</label>     <input type="password" name="log_password" class="logintext" id="password" placeholder="password">   </span>   <button type="submit" class="loginbutton" name="login" >login now</button> </form> 

css

form span {   display:inline-block;   margin:0 50px;   vertical-align:bottom; } span input {  display:block;/* if want submit under , form input {} include */ } form {   float:right;   /* demo */   border:solid;   border-radius:1em;   padding:0.25em; } 

turns demo