How to Align Labels Next to Inputs

When you create a web form, you’ll probably need to know how to align labels with inputs. Here, we’ll show how it’s possible to create right-aligned and left-aligned <label> elements next to inputs.

Solutions with CSS properties

In our example below, we use three <div> elements and place <label> and <input> elements within each of them. Note that we use a type attribute for each <input>. We specify the margin-bottom of our <div> element. Then, we set the display of the <label> element to "inline-block" and give a fixed width. After that, set the text-align property to "right", and the labels will be aligned with the inputs on the right side.

Example of right aligning labels next to inputs with the text-align property:

<!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>

Result

We can remove the text-align property, and the labels will be left-aligned by default. Let’s see an example, where we also add placeholder, id and name attributes on inputs and for attribute on labels. As a result, the input will be activated when a label is clicked.

Example of left aligning labels next to inputs:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin-bottom: 10px;
      }
      label {
        display: inline-block;
        width: 150px;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="post">
      <div>
        <label for="name">Name</label>
        <input type="text" id="name" placeholder="Enter your name" />
      </div>
      <div>
        <label for="age">Your Age</label>
        <input type="text" id="age" name="age" placeholder="Enter your age" />
      </div>
      <div>
        <label for="country">Enter Your Country</label>
        <input type="text" id="country" name="country" placeholder="Country" />
      </div>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

In our next example too, we’ll left-align the labels. Here, we also make the <label> inline-block and give a fixed width. For the <input> element, we add padding.

Example of left aligning labels next to inputs:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin-bottom: 10px;
      }
      label {
        display: inline-block;
        width: 110px;
        color: #777777;
      }
      input {
        padding: 5px 10px;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="post">
      <div>
        <label for="name">Your name:</label>
        <input id="name" name="username" type="text" autofocus />
      </div>
      <div>
        <label for="lastname">Your Last name:</label>
        <input id="lastname" name="lastname" type="text" />
      </div>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>