Align several label

Question

I will wish to align several HTML labels towards the left of the page like the example below.

Here is the code for an idea of my realization. See below code:

    .form_padding, label{
      font-family: 'Pridi', serif;
      font-size: 16px;
      font-weight: bold;
      color: #595959;
      padding-top: 20px;
      padding-left: 90px;
      
    }
    
    .form_group{
      height: 28px;
      width: 272px;
      border-width:1px 1px 2px 1px;
      border-style:solid;
      border-color: #ccc #ccc #C22312 #ccc; 
      border-radius:1px;
    }

    <div class="form_padding">
         <label>Your Username:</label>
        <input type="text" name="username" class="form_group">
     </div>
    
     <div class="form_padding">
          <label>Your Email Adress:</label>
          <input type="email" name="email_adress" class="form_group">
     </div>
    
     <div class="form_padding">
          <label>Confirm Your E-mail:</label>
          <input type="email" name="email_adress_confirm" class="form_group">
     </div>  

Answer 1

hi what I did below was separate the form_padding and label css.

Then on the label I added display:inline-block, text-align:right, add right margin, and specified the width.

Specifying the width is important here as this would make the spacing uniform.

Run code below.

.form_padding {
  display: block;
  padding-top: 20px;
}

label {
  font-family: 'Pridi', serif;
  font-size: 16px;
  font-weight: bold;
  color: #595959;
  padding-left: 0px;
  width: 180px;
  display: inline-block;
  text-align:right;
  margin-right:20px;
}

.form_group {
  height: 28px;
  width: 150px;
  border-width: 1px 1px 2px 1px;
  border-style: solid;
  border-color: #ccc #ccc #C22312 #ccc;
  border-radius: 1px;
}

<div class="form_padding">
  <label>Your Username:</label>
  <input type="text" name="username" class="form_group">
</div>

<div class="form_padding">
  <label>Your Email Adress:</label>
  <input type="email" name="email_adress" class="form_group">
</div>

<div class="form_padding">
  <label>Confirm Your E-mail:</label>
  <input type="email" name="email_adress_confirm" class="form_group">
</div>