CSS - inputs are not aligned

Question

I have the following code:

<span class="input-label">New Password:</span>
<input id="password" type="password" name='password' placeholder="Insert new password">
<br> <span class="input-label">Confirm New Password:</span>
<input id="cpassword" type="password" placeholder="Confirm new password" name="confirmpassword" autocomplete="new-password">
<br>
<input type="submit" name="submit_password">

I thought when using labels to align the inputs, but that’s not what happens, as shown in the image below.

Answer 1

Hi there, Diana, hello! There are several ways to do this, I’ll show you one.

The tag span, by default, comes with display: inline;, that will not work with the property width which I will use for one of the possible solutions to your problem. Below is the code CSS, defining a fixed value for the width and also changes its display for inline-block, and finally aligns the text to the right.

.input-label {
  display: inline-block;
  text-align: right;
  width: 180px;
}

You can see the code working here.
You can find more information about display here and here

Obs* in HTML5 we have a variety of semantically qualified elements for each type of structure of a.html page, for example, rather than using span to define the label, you can use the tag itself <label></label>.