justify for other elements rather then text - html

Question

So I have a simple login prompt like this:
<form id="login">
<legend>Login</legend>
<span>
<input type="text" value="Username">
<input type="password" value="Password"><br>
<input type="checkbox">Remember
Forgot?
Register
<input type="submit" value="Login">
</span>
</form>
and the css:
#login {
display: inline;
float: right;
line-height: 1.5em;
margin-right: 0.5em;
}
https://jsfiddle.net/tzc6Lpur/
What I would like is that the bottom items are stretched over the entire width of the element so that login button would be lined up to the right end of the password box. Something like text-align: justify; would to that for text but I can't find an easy way to do this. Ofcourse I could manually position the elements but that just seems to be a lot redundant code.
any help is appreciated!

Answer 1

The easy way would be to change your markup accordingly:
<form id="login">
<legend>Login</legend>
<div>
<input type="text" value="Username">
<input type="password" value="Password"><br>
<div class="flex-wrap">
<label for="myCheckbox"><input name="myCheckbox" type="checkbox">Remember</label>
Forgot?
Register
<input type="submit" value="Login">
</div>
</div>
</form>
and use the following CSS:
.flex-wrap{
display: flex;
flex-direction: row;
justify-content: space-between;
}
#login{
float:right; //To mantain the form on the right of the screen
}
Flex box is supported by all modern browsers, but if you need to support
JSFiddle: https://jsfiddle.net/silviagreen/hcktxgva/3/

Answer 2

You can Use this to align your button to the right end.
<input id = "login_button" type="submit" value="Login">
and in css add
#login_button{
float:right;
}
You can use twitter-bootstrap-3 which will help you a lot. Take a look into it.

Answer 3

all you have to do is, add one more span and add float:right to it.
take a look at this. https://jsfiddle.net/adityap708/sedLvLp2/
<form id="login">
<legend>Login</legend>
<span>
<input type="text" value="Username">
<input type="password" value="Password"><br>
<span style="float:right;">
<input type="checkbox">Remember
Forgot?
Register
<input type="submit" value="Login">
</span>
</span>
</form>
#login {
display: inline;
float: right;
line-height: 1.5em;
margin-right: 0.5em;
}

Answer 4

You can the use flexbox on the wrapper elements which, really, should be block level and not a spans.
#login {
display: inline;
float: right;
line-height: 1.5em;
margin-right: 0.5em;
}
#login div {
display: flex;
justify-content: space-between;
}
<form id="login">
<legend>Login</legend>
<div>
<input type="text" value="Username">
<input type="password" value="Password">
</div>
<div>
<input type="checkbox">Remember
Forgot?
Register
<input type="submit" value="Login">
</div>
</form>