Label sticking next to another label - html

Question

I am having a simple registration form, but one of the label fields sticks next to another label field.
Currently it looks like this:
Email should be under the Username, not next to it. Other form elements align nicely, but not these two.
label {
float: left;
}
input {
float: right;
}
<div class="form-wrapper">
<div>
<div>
<label for="user-name">Username:</label>
<input type="text" id="user-name" name="user-name" required>
</div>
<div>
<label for="user-email">Email:</label>
<input type="email" id="user-email" name="user-email" required>
</div>
</div>
</div>

Answer 1

Why don't you just use flex, clean and less code.
.form-wrapper {
width: 400px;
border: 1px solid blue;
}
.username,
.useremail {
display: flex;
margin: 10px;
width: 350px;
justify-content: space-between;
font-weight: bold;
}
<div class="form-wrapper">
<div>
<div class="username">
<label for="user-name">Username:</label>
<input type="text" id="user-name" name="user-name" required>
</div>
<div class="useremail">
<label for="user-email">Email:</label>
<input type="email" id="user-email" name="user-email" required>
</div>
</div>
</div>

Answer 2

If you are going with float you have to know about using clear property for it's next elements. So a best way to handle is, to create a after pseudo-element on the parent and clear:both.
In the below code have added 'field' class for each container and styled it with :after.
.field::after{
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
label {
float: left;
}
input {
float: right;
}
<div class="form-wrapper">
<div>
<div class="field">
<label for="user-name">Username:</label>
<input type="text" id="user-name" name="user-name" required>
</div>
<div class="field">
<label for="user-email">Email:</label>
<input type="email" id="user-email" name="user-email" required>
</div>
</div>
</div>

Answer 3

Labels and input fields are stacked from the left and the right, resp., due to the css float properties. Note that the label/input pairs render on individual lines when removing the css, though without proper vertical alignment.
The CSS display: table property and friends can be employed to rectify this. Basically they cause the renderer to apply table layouting to elements other than tableand descendants.
.d-t {
display: table;
}
.d-tr {
display: table-row;
}
.d-tr > label, .d-tr > input {
display: table-cell;
}
<div class="form-wrapper">
<div class="d-t">
<div class="d-tr">
<label for="user-name">Username:</label>
<input type="text" id="user-name" name="user-name" required>
</div>
<div class="d-tr">
<label for="user-email">Email:</label>
<input type="email" id="user-email" name="user-email" required>
</div>
</div>
</div>