Adjusting the floating elements on a webpage - html

Question

I'm trying to achieve the following result:
Email Password
[Email box] [Password Box] [Log In]
[]keep me logged in Forgot Password?
I've been successful in implementing the first two lines (Email ... [Log In]) but can't shape the last line.
Here's the code.
<ul>
<li>
<label for="mail">Email: </label><br>
<input type="email" name="mail" /><br>
<input type="checkbox" name="stayLoggedIn" />
<small>Keep me signed in</small>
</li>
<li>
<label for="paswrd">Password: </label><br>
<input type="password" name="paswrd" /><br>
<small>Forgot Password?</small>
</li>
<li><button type="button" name="login">Log In</button></li><br><p> </p>
</ul>
The CSS code is as follows.
header ul {float: right;}
header ul li {
display: inline-block;
color: #FFEBCD;
font-family: "Maiandra GD";
}
header small {float: right;}

Answer 1

You will need to do this with two div's one float to the left the second float to the right
see an example
<div class="left_div">
<label for="mail">Email: </label><br>
<input type="email" name="mail" /><br>
<input type="checkbox" name="stayLoggedIn" />
<small>Keep me signed in</small>
</div>
<div class="right_div">
<label for="paswrd">Password: </label><br>
<input type="password" name="paswrd" /><br>
<small>Forgot Password?</small>
</div>
The CSS code
.left_div {
float: left;
width: 300px;
}
.right_div {
float: right;
width: 300px;
}