Input group addons altering the total width of an input group

I've noticed that when using control group addons with Bootstrap that the total width of the control group is larger than those controls that do not have addons. This width change does not seem to be affected by the number of addons used.

<!-- begin snippet: js hide: false --> <!-- language: lang-html -->

<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid">
  <form role="form" class="form-horizontal">
    <div class="form-group">
      <label for="inputElementName" class="control-label col-sm-4">Element Name</label>
      <div class="col-sm-6">
        <input type="text" class="form-control" id="inputElementName" placeholder="Enter name for element" />
      </div>
    </div>
    <div class="form-group">
      <label for="inputElementFrequency" class="control-label col-sm-4">Element Frequency</label>
      <div class="col-sm-6 input-group"> <span class="input-group-addon">Every</span>
        <input type="number" class="form-control" id="inputElementFrequency" placeholder="Enter how often this element appears." /> <span class="input-group-addon">numbers</span>
      </div>
    </div>
    <div class="form-group">
      <label for="inputElementData" class="control-label col-sm-4">Element Data</label>
      <div class="col-sm-6 input-group">
        <input type="number" class="form-control" id="inputElementData" placeholder="Enter this element's data." /> <span class="input-group-addon">Data</span>
      </div>
    </div>
  </form>
</div>

<!-- end snippet -->

How can I ensure my controls fill the same width, regardless of addons?

The .input-group div should be part of its own element instead of lumped in with .col-xs-6. Remember, an .input-group div is taking the place of an input control. So use them interchangeably.

Instead of this:

<!-- language: lang-html -->

<div class="col-sm-6 input-group">
    
    <span class="input-group-addon">Every</span>
    <input type="number" class="form-control" />
   
</div>

Do this:

<!-- language: lang-html -->

<div class="col-sm-6 ">
  <div class="input-group">
    <span class="input-group-addon">Every</span>
    <input type="number" class="form-control" /> 
  </div>
</div>

Demo in Stack Snippets

<!-- begin snippet: js hide: false console: false babel: false --> <!-- language: lang-html -->

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <form role="form" class="form-horizontal">
    <div class="form-group">
      <label for="inputElementName" class="control-label col-sm-4">Element Name</label>
      <div class="col-sm-6">
        <input type="text" class="form-control" id="inputElementName" placeholder="Enter name for element" />
      </div>
    </div>
    <div class="form-group">
      <label for="inputElementFrequency" class="control-label col-sm-4">Element Frequency</label>
      <div class="col-sm-6 ">
        <div class="input-group">
          <span class="input-group-addon">Every</span>
          <input type="number" class="form-control" id="inputElementFrequency" placeholder="Enter how often this element appears." /> <span class="input-group-addon">numbers</span>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label for="inputElementData" class="control-label col-sm-4">Element Data</label>
      <div class="col-sm-6 ">
        <div class="input-group">
          <input type="number" class="form-control" id="inputElementData" placeholder="Enter this element's data." /> <span class="input-group-addon">Data</span>
        </div>
      </div>
    </div>
  </form>
</div>

<!-- end snippet -->