title: How to align fields in bootstrap columns
body: <p>How can I align the second field of the first column, with the first fields of the 2nd, 3rd, and 4th columns, as shown in the image below, and have it be responsive using Bootstrap?</p>
  
  <p><a href="https://i.stack.imgur.com/9jN4j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9jN4j.png" alt="shot"></a></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-css lang-css prettyprint-override"><code>.label1 {
    width: 90px;
    display: inline-block;
    text-align: right;
    padding-right: 10px;
    font-weight: normal !important;
  }
  
  .label2 {
    width: 90px;
    display: inline-block;
    text-align: right;
    padding-right: 10px;
    font-weight: normal !important;
  }
  
  .label3 {
    width: 60px;
    display: inline-block;
    text-align: right;
    padding-right: 10px;
    font-weight: normal !important;
  }
  
  .label4 {
    width: 90px;
    display: inline-block;
    text-align: right;
    padding-right: 10px;
    font-weight: normal !important;
  }
  
  .label5 {
    width: 90px;
    display: inline-block;
    text-align: right;
    padding-right: 10px;
    font-weight: normal !important;
  }
  
  .label6 {
    width: 90px;
    display: inline-block;
    text-align: right;
    padding-right: 10px;
    font-weight: normal !important;
  }
  
  .label7 {
    width: 90px;
    display: inline-block;
    text-align: right;
    padding-right: 10px;
    font-weight: normal !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="panel panel-default" id="period"&gt;
    &lt;div class="panel-body"&gt;
  
      &lt;form class="form-inline"&gt;
        &lt;div class="container-fluid"&gt;
          &lt;div class="row"&gt;
  
            &lt;div class="col-md-4"&gt;
  
  
              &lt;div class="row"&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="label1"&gt;sss&lt;/label&gt;
                  &lt;input type="text" class="form-control" id="pcode" size="9"&gt;
                  &lt;input type="text" class="form-control" id="pcName" size="20"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
  
  
  
              &lt;div class="row"&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="label2"&gt;vvvv&lt;/label&gt;
                  &lt;input type="text" class="form-control" id="pcode" size="9"&gt;
  
                  &lt;label class="label3"&gt;bbbb&lt;/label&gt;
                  &lt;select class="form-control" id="btnClear"&gt;
    &lt;option value="volvo"&gt;nnnn&lt;/option&gt;
    &lt;option value="saab"&gt;nnnn&lt;/option&gt;
    &lt;option value="opel"&gt;nnnnn&lt;/option&gt;
    &lt;option value="audi"&gt;nnnnn&lt;/option&gt;
    &lt;/select&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
  
  
  
              &lt;div class="row"&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="label4"&gt;hhhhhh&lt;/label&gt;
                  &lt;input type="text" class="form-control" size="35"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
  
  
              &lt;div class="row"&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="label5"&gt;jjjjj&lt;/label&gt;
                  &lt;input type="text" class="form-control" size="35"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
  
  
  
              &lt;div class="row"&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="label6"&gt;&lt;/label&gt;
                  &lt;input type="text" class="form-control" size="35"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
  
            &lt;/div&gt;
  
  
            &lt;div class="col-md-3"&gt;
  
  
              &lt;div class="row"&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="label1"&gt;kkkkkkk&lt;/label&gt;
                  &lt;input type="text" class="form-control" size="20"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
  
              &lt;div class="row"&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="label1"&gt;llllll&lt;/label&gt;
                  &lt;input type="text" class="form-control" size="20"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
  
              &lt;div class="row"&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="label1"&gt;2&lt;/label&gt;
                  &lt;input type="text" class="form-control" size="20"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
  
              &lt;div class="row"&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="label1"&gt;3&lt;/label&gt;
                  &lt;input type="text" class="form-control" size="20"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
            &lt;/div&gt;
  
            &lt;div class="col-md-3"&gt;
  
              &lt;div class="row"&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="label1"&gt;rrrrrra&lt;/label&gt;
                  &lt;input type="text" class="form-control" size="20"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="label1"&gt;ttttt&lt;/label&gt;
                  &lt;input type="text" class="form-control" size="20"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
  
              &lt;div class="row"&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="label1"&gt;2&lt;/label&gt;
                  &lt;input type="text" class="form-control" size="20"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
  
              &lt;div class="row"&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="label1"&gt;3&lt;/label&gt;
                  &lt;input type="text" class="form-control" size="20"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
  
            &lt;div class="col-md-2"&gt;
  
              &lt;div class="row"&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="label7"&gt;uuuuu&lt;/label&gt;
                  &lt;input type="text" class="form-control" id="pcode" maxlength="20" size="7"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
            &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;br&gt;&lt;br&gt;
  
  
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>