title: How to set same width of every form group?
body: <p>I used <code>form-control-static</code> class for display inline of the first one <code>form group</code> class , I want  that's width to as same as second <code>form-group</code> width because I have used <code>form-control</code> for that one .How can I fixed it ?</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;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;form id="att_chart_serach" class="form-inline sm-left"&gt;
     &lt;div class="form-group"&gt; &lt;!-- first one   --&gt;
      &lt;a class="btn btn-default col-sm-2 form-control-static prev_year"&gt; &amp;laquo; &lt;/a&gt;                     
      &lt;select class="form-control-static col-sm-4" data-toggle="select" name="show_month" id="show_month"&gt;
              &lt;option&gt;dfs&lt;/option&gt;
      &lt;/select&gt;
      &lt;a  class="btn btn-default col-sm-2 form-control-static next_year"&gt; &amp;raquo; &lt;/a&gt;
     &lt;/div&gt;
     &lt;div class="form-group"&gt; &lt;!-- second --&gt;
      &lt;select  class="form-control" name="deptselect" id="dept_name"&gt;            
               &lt;option selected&gt;Select Department&lt;/option&gt;
      &lt;/select&gt;
     &lt;/div&gt;
     &lt;input type="submit" id="att_sub" class="btn btn-success form-control-static img-rounded" value=""&gt; 
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>