align label and input right code example

Example: how to make input and label align right

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin-bottom: 10px;
      }
      label {
        display: inline-block;
        width: 150px;
        text-align: right;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="post">
      <div>
        <label>Short</label>
        <input type="text" />
      </div>
      <div>
        <label>Simple label</label>
        <input type="text" />
      </div>
      <div>
        <label>Label having more text</label>
        <input type="text" />
      </div>
    </form>
  </body>
</html>

Tags:

Misc Example

Recent Posts