Align labels to left on form using CSS - html

Question

I have a login form with labels and input, i can not get the labels to go on the left and input on the right. Currently they are sitting on top of each other.
Here is the HTML:
<div class="login">
<form name="login" action="submit" method="get" accept- charset="utf-8">
<label for="usermail">Username</label>
<input type="email" name="usermail" placeholder="yourname#email.com" required>
<label for="password">Password</label>
<input type="password" name="password" placeholder="password" required>
<input type="submit" value="Login">
</form>
</div>
Here is the CSS:
form {
margin:auto;
position:relative;
width:375px;
height:250px;
font-family: Lucida Sans, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
line-height: 24px;
font-weight: bold;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:10px;
border: 1px solid #999;
border: inset 1px solid #333;
}
input { float:right;
width:350px;
display:block;
border: 1px solid #999;
height: 25px;
}
Here is the JSFiddle https://jsfiddle.net/ojz87d0x/

Answer 1

On input, change display:block; to display:inline-block;, and add the following:
label {
display: inline-block;
float:left;
clear:both;
}
input[type="submit"] {
clear: both;
}
You'll also need to make sure that the width of the input and the width of the form are different enough to allow space for the label. In this example [in the fiddle]. I set input to 275px and form to 375px.
Here's a newer update to your fiddle.

Answer 2

First of all, the inputs are too wide for both the labels and inputs to be next to each other inside the form. So either widen the form or shorten the inputs.
Next, add float: left to the labels.
form {
margin: auto;
position: relative;
width: 375px;
height: 250px;
font-family: Lucida Sans, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
line-height: 24px;
font-weight: bold;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 10px;
border: 1px solid #999;
border: inset 1px solid #333;
}
input {
float: right;
width: 300px; /*smaller width*/
display: block;
border: 1px solid #999;
height: 25px;
}
label {
float: left;
margin-top: 3px;
<div class="login">
<form name="login" action="submit" method="get" accept- charset="utf-8">
<label for="usermail">Username</label>
<input type="email" name="usermail" placeholder="yourname#email.com" required>
<label for="password">Password</label>
<input type="password" name="password" placeholder="password" required>
<input type="submit" value="Login">
</form>
</div>