title: Why two input boxes side by side inside div impose an extra padding-top?
body: <p>I am trying to make a form with 2 columns using bootstrap. The fields name and street appear side by side (large screen) and no problem but on second rowzip code is not vertical aligned with City because zip code has 2 edit boxs. If i use just one edit box in zip code everything looks fine but if i use two edit boxes an extra pading top appears. Why?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;H1&gt;Hello&lt;/H1&gt;
  &lt;P&gt;Sample text here.&lt;/P&gt; 
  
  &lt;section id="Delivery" class="Delivery-section"&gt;
   &lt;div class="container"&gt;
    
    &lt;div class="row" style='padding:0px'&gt;
     &lt;div class="col-sm-1"&gt;
     &lt;/div&gt;
     &lt;div class="col-sm-10" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px'&gt;
      &lt;legend style='text-align:center'&gt;Delivery Address&lt;/legend&gt;
     &lt;/div&gt;        
     &lt;div class="col-sm-1"&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class="row" style='padding:0px'&gt;    
     &lt;div class="col-sm-1"&gt;
     &lt;/div&gt;
     &lt;div class="col-sm-5" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px'&gt;
      &lt;span style='font-weight: bold;font-size:13px;'&gt;Name: (*)&lt;/span&gt;&lt;br&gt;
      &lt;input style="width:100%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="name" id="name" value='' size="30" /&gt;
     &lt;/div&gt;      
     &lt;div class="col-sm-5" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px'&gt;
      &lt;span style='font-weight: bold;font-size:13px;'&gt;Street: (*)&lt;/span&gt;&lt;br&gt;
      &lt;input style="width:100%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="street" id="street" value='' size="30" /&gt;
     &lt;/div&gt;  
     &lt;div class="col-sm-1"&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class="row" style='padding:0px'&gt;    
     &lt;div class="col-sm-1"&gt;
     &lt;/div&gt;
     &lt;div class="col-sm-5" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px;'&gt;
      &lt;span style='font-weight: bold;font-size:13px;'&gt;City: (*)&lt;/span&gt;&lt;br&gt;
      &lt;input style="width:100%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="city" id="city" value='' size="30" /&gt;
     &lt;/div&gt;      
     &lt;div class="col-sm-5" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px;'&gt;
      &lt;span style='font-weight: bold;font-size:13px;'&gt;Zip code: (*)&lt;/span&gt;&lt;br&gt;
      &lt;input style="width:14%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="cp1" id="cp1" value='' size="30" /&gt;
      &lt;input style="width:14%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="cp2" id="cp2" value='' size="30" /&gt;
     &lt;/div&gt;  
     &lt;div class="col-sm-1"&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt; 
  &lt;/section&gt; </code></pre>
  </div>
  </div>
  </p>