How would I position two input boxes and a button on the right side of the webpage? Also how to make Input text 20 pixels lower than it is?

I tried left: 80% on the parent div. Also tried justify content.This is the code. I want to make the text inside the input ( not inside the box, not the place holder) but the text inside ``` UserName to be centered with the input box.

<div id="buttondiv">

<input>UserName</input>
<input>Password</input>
<button type="button" class="button1">Sign In!</button>

</div>

Hello @InputLite,

Use flex-direction: row-reversed instead of justify-content

#buttondiv {
		display: flex;
		flex-direction: row-reverse;
	}
1 Like

Sorry about the reversed order,
I have tried this flex-end

#buttondiv {
		display: flex;
		justify-content: flex-end;
	}
1 Like

First, your inputs are completely wrong. There is no closing tag for an input. Try something like

<div id="button-div">
  <label>Username: <input type="text" name="username" ></label>
  <label>Password: <input type="password" name="passwd"></label>
  <input type="submit" class="button1" value="Sign in!">
</div>

But that still doesn’t get you to be on the right, like you want. You’d need to pull this div out of the normal order by position: absolute;, and then set its top and right:

#button-div {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 10x;
  border: 1px solid silver;
}
#button-div > * {
  display: block;
}

The second CSS rule above says “Any direct children of my button-div should be separated each into their own line.”

Here’s a link to a codepen that does what you sound like you’re looking for.

This puts it on the left. I want it on the right.

1 Like

Winner! Thanks!Winner! Thanks!Winner! Thanks!Winner! Thanks!Winner! Thanks!Winner! Thanks!Winner! Thanks!Winner! Thanks!Winner! Thanks!

Hahhaha… Thanks @InputLite