How to right-align form input boxes?

alignment, css, html

Solution

You can use floating to the right and clear them.

form {
  overflow: hidden;
}
input {
  float: right;
  clear: both;
}

<form>
  <input name="declared_first" value="above" />
  <input name="declared_second" value="below" />
</form>

You can also set a right-to-left `direction` to the parent and restore the default left-to-right on the inputs. With `display: block` you can force them to be on different lines.

form {
  direction: rtl;
}
input {
  display: block;
  direction: ltr;
}

<form>
  <input name="declared_first" value="above" />
  <input name="declared_second" value="below" />
</form>

Or the modern way, flexbox layout

form {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

<form>
  <input name="declared_first" value="above" />
  <input name="declared_second" value="below" />
</form>

Problem

I have a seemingly easy problem to solve, but am struggling. How do I get these two inputs to align to the right of the form, without using the BR element ? ``` <!DOCTYPE html> <html> <head> <style type="text/css"> form { text-align: right; } input { width: 100px; } </style> </head> <body> <form> <input name="declared_first" value="above" /> <br/> <!-- I want to get rid of this --> <input name="declared_second" value="below" /> </form> </body> </html> ``` I just want the first input to appear above the second input, both on the right hand side.

Original source