Home/ Questions/Q 8436387
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T07:09:57+00:00

I have a seemingly easy problem to solve, but am struggling. How do I

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0