position the text in the required place - html

Question

HTML
<div class="form">
<!-- USERNAME BOX-->
<label for="username"><b>Username or email address</b></label><br>
<input type="text" name="username" value=""><br>
<!-- PASSWORD BOX -->
<label for="password">
Password
Forgot password?
</label><br>
<input type="password" name="password" value=""><br>
<!-- SIGN IN BUTTON -->
<input type="button" name="button" value="Sign in">
</div>
CSS
.form{
background: white;
border: 1px solid #aaa;
padding: 15px;
border-radius: 5px;
}
label{
font-size: 12px;
font-weight: 600;
text-align: left;
}
input{
margin-top: 5px;
margin-bottom: 10px;
width: 300px;
height: 25px;
border-radius: 5px;
border: 1px solid #aaa;
text-indent: 5px;
box-shadow: inset 0 0 1px #000;
outline-color: dodgerblue;
}
input[type="button"]{
background: green;
color: white;
font-weight: 600;
height: 30px;
border: darkgreen;
}
label a{
float: right;
transform: translateY(3px);
text-decoration: none;
}
I want Forgot password? to end exactly where the input field ended. I have tried to do this but i couldn't. Plese help me to fix this. It shifted towards right from the required position.

Answer 1

You should add the following css for label so that label will be same width as input, and its Forgot password? aligns with input field.
width: 300px;
display: inline-block;
.form{
background: white;
border: 1px solid #aaa;
padding: 15px;
border-radius: 5px;
}
label{
font-size: 12px;
font-weight: 600;
text-align: left;
width: 300px;
display: inline-block;
}
input{
margin-top: 5px;
margin-bottom: 10px;
width: 300px;
height: 25px;
border-radius: 5px;
border: 1px solid #aaa;
text-indent: 5px;
box-shadow: inset 0 0 1px #000;
outline-color: dodgerblue;
}
input[type="button"]{
background: green;
color: white;
font-weight: 600;
height: 30px;
border: darkgreen;
}
label a{
float: right;
/* transform: translateY(3px); */
text-decoration: none;
}
<div class="form">
<!-- USERNAME BOX-->
<label for="username"><b>Username or email address</b></label><br>
<input type="text" name="username" value=""><br>
<!-- PASSWORD BOX -->
<label for="password">
Password
Forgot password?
</label><br>
<input type="password" name="password" value=""><br>
<!-- SIGN IN BUTTON -->
<input type="button" name="button" value="Sign in">
</div>

Answer 2

I think you positioned you forgot password on the wrong place.
<div class="form">
<!-- USERNAME BOX-->
<label for="username"><b>Username or email address</b></label><br>
<input type="text" name="username" value=""><br>
<!-- PASSWORD BOX -->
<label for="password">
Password
</label><br>
<input type="password" name="password" value="">Forgot password?
<br>
<!-- SIGN IN BUTTON -->
<input type="button" name="button" value="Sign in">
</div>

Answer 3

Firstly, you need to remove the <br>s after the labels:
<div class="form">
<!-- USERNAME BOX-->
<label for="username"><b>Username or email address</b></label>
<input type="text" name="username" value=""><br>
<!-- PASSWORD BOX -->
<label for="password">
Password
Forgot password?
</label>
<input type="password" name="password" value=""><br>
<!-- SIGN IN BUTTON -->
<input type="button" name="button" value="Sign in">
</div>
Then, you need to add display: block; and width: 310px; to the label:
label {
font-size: 12px;
font-weight: 600;
text-align: left;
display: block;
width: 310px;
}