title: Align two input textbox and one button horizontally
body: <p>I have two inputs, one button and one drop down menu, how do i align it so that its next to each other. I have created div for each element but things dont look right. this is what i have done:   </p>
  
  <pre><code>&lt;div class="class1"&gt;
          &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;    &lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="input1" &gt;
          &lt;input type="text" value="" class="form-control" id="deatPicker1"&gt;
      &lt;/div&gt;
      &lt;div class="class1" &gt;
          &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;    &lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="input1"&gt;
          &lt;input type="text" value="" class="form-control" id="deatPicker2"&gt;
      &lt;/div&gt;
  
  &lt;div class="button" style="display: inline-block;"&gt;
      &lt;button type="submit" class="btn btn-default"&gt;&lt;i class="glyphicon glyphicon-search"&gt;    &lt;/i&gt;&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>My Css:</strong> during this process i have noticed the above example works fine but only if i create another web-page if i use my current web page then things dont stay the way i want</p>
  
  <pre><code> .class1{
      display: inline-block;
      width: 15px;
    }
   .input1{
      display: inline-block;
      width: 200px;
      padding-left: 20px;
    }
  </code></pre>