Floating label on top inputs - html

Question

I am trying to float a label on top of the input but it's not working correctly? Maybe I messed up the CSS? Help would be greatly appreciated, thanks!
Heres what it looks like at the 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;
}

Answer 1

you can wrap label & input into a <p> or a <span> displayed as inline-block.
input can be displayed as block to break the 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 you want submit under , do form input {} to include it too */
}
form {
float:right;
/* for the demo */
border:solid;
border-radius:1em;
padding:0.25em;
}
Turns to look like DEMO

Answer 2

try this
#loginformitem input , #loginformitem label {
clear : left ,
float : left
}