title: HTML5 Bootstrap3: Display side-by-side credit card expiration month and year?
body: <p>I've been using Bootstrap v3 to make a mobile friendly payment form/application. I'm having some difficulty showing side-by-side fields (2) together with the normal text field. There's a credit card expiration month and a credit card expiration year. When changing the page width the label/fields don't adjust in the same way. The dropdowns are also difficult to read at times. Should I just apply a fixed with to the dropdowns? Any suggestions? See JSFiddle example.</p>
  
  <p><a href="https://jsfiddle.net/1dnqLb8r/" rel="nofollow">https://jsfiddle.net/1dnqLb8r/</a></p>
  
  <p>Full Screen</p>
  
  <p><a href="https://jsfiddle.net/1dnqLb8r/embedded/result/" rel="nofollow">https://jsfiddle.net/1dnqLb8r/embedded/result/</a></p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;fieldset&gt;
      &lt;legend&gt;Credit Card Information&lt;/legend&gt;
      &lt;!-- Text input--&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="col-md-4 control-label" for="AccountNo" id="AccountNo_label"&gt;* Card Number&lt;/label&gt;
          &lt;div class="col-md-5"&gt;
              &lt;input id="AccountNo" name="AccountNo" type="tel" value="1234123412341234" placeholder="Debit / Credit Card Number" class="form-control input-md" required=""&gt; &lt;span class="help-block" style="display: none;"&gt;Enter a valid debit or credit card number. Spaces will be shown automatically.&lt;/span&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="col-sm-4 control-label" for="CCMonth"&gt;* Card Expiration&lt;/label&gt;
          &lt;div class="col-md-5"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-xs-3"&gt;
                      &lt;select class="form-control col-sm-2" name="CCMonth" id="CCMonth"&gt;
                          &lt;option&gt;Month&lt;/option&gt;
                          &lt;option value="01" Selected&gt;Jan (01)&lt;/option&gt;
                          &lt;option value="02"&gt;Feb (02)&lt;/option&gt;
                          &lt;option value="03"&gt;Mar (03)&lt;/option&gt;
                          &lt;option value="04"&gt;Apr (04)&lt;/option&gt;
                          &lt;option value="05"&gt;May (05)&lt;/option&gt;
                          &lt;option value="06"&gt;June (06)&lt;/option&gt;
                          &lt;option value="07"&gt;July (07)&lt;/option&gt;
                          &lt;option value="08"&gt;Aug (08)&lt;/option&gt;
                          &lt;option value="09"&gt;Sep (09)&lt;/option&gt;
                          &lt;option value="10"&gt;Oct (10)&lt;/option&gt;
                          &lt;option value="11"&gt;Nov (11)&lt;/option&gt;
                          &lt;option value="12"&gt;Dec (12)&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-3"&gt;
                      &lt;select class="form-control" name="CCYear"&gt;
                          &lt;option&gt;Year&lt;/option&gt;
                          &lt;option value="15" selected&gt;2015&lt;/option&gt;
                          &lt;option value="16"&gt;2016&lt;/option&gt;
                          &lt;option value="17"&gt;2017&lt;/option&gt;
                          &lt;option value="18"&gt;2018&lt;/option&gt;
                          &lt;option value="19"&gt;2019&lt;/option&gt;
                          &lt;option value="20"&gt;2020&lt;/option&gt;
                          &lt;option value="21"&gt;2021&lt;/option&gt;
                          &lt;option value="22"&gt;2022&lt;/option&gt;
                          &lt;option value="23"&gt;2023&lt;/option&gt;
                          &lt;option value="24"&gt;2024&lt;/option&gt;
                          &lt;option value="25"&gt;2025&lt;/option&gt;
                          &lt;option value="26"&gt;2026&lt;/option&gt;
                          &lt;option value="27"&gt;2027&lt;/option&gt;
                          &lt;option value="28"&gt;2028&lt;/option&gt;
                          &lt;option value="29"&gt;2029&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt; &lt;span class="help-block" style="display: none;"&gt;Select the card expiration date month and year.&lt;/span&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>
  
  </p>