title: How to align labels of multiple input fields vertically?
body: <p>I have two input fields for the user to fill namely <code>username</code> and <code>password</code>. This is how it looks like</p>
  
  <p><a href="https://i.stack.imgur.com/iOQDz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iOQDz.png" alt="enter image description here"></a></p>
  
  <p>Here is the code below for the same</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
      &lt;head&gt;
        &lt;title&gt;Bootstrap Example&lt;/title&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
        &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      
      &lt;div class="container"&gt;
        &lt;form class="form-horizontal"&gt;
          &lt;div class="form-group"&gt;
            &lt;label class="control-label col-sm-2" for="email"&gt;Email:&lt;/label&gt;
            &lt;div class="col-sm-3"&gt;
              &lt;input type="email" class="form-control" id="email" placeholder="Enter email" name="email"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label class="control-label col-sm-2" for="pwd"&gt;Password:&lt;/label&gt;
            &lt;div class="col-sm-3"&gt;          
              &lt;input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
      
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now I want the <code>Email</code> and <code>Password</code> to be aligned vertically just like the input fields are aligned.</p>
  
  <p>I read about <code>form-control-static</code> but I am unable to see the effect here. I tried using it for the classes for <code>Email</code> and <code>Password</code> something like</p>
  
  <pre><code>&lt;label class="control-label col-sm-2 form-control-static" for="pwd"&gt;Password:&lt;/label&gt;
  </code></pre>
  
  <p>But I do not see any change. What am I doing wrong?</p>
  
  <p><strong>Note:</strong> I am using Bootstrap 3</p>