title: bootstrap input group sizing
body: <p>I have a series of bootstrap 4 input groups and would like them to be of the same size. In the <a href="https://getbootstrap.com/docs/4.0/components/input-group/#sizing" rel="nofollow noreferrer">docs</a>, they add classes like <code>input-group-sm</code> or <code>input-group-lg</code> and even though the text sizes are changed, the overall width of the input group stays the same.</p>
  
  <p>That doesn't work for me:</p>
  
  <p><a href="https://i.stack.imgur.com/C6uat.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C6uat.png" alt="input groups"></a></p>
  
  <p>Fiddle: <a href="https://jsfiddle.net/efx7rp4n/" rel="nofollow noreferrer">https://jsfiddle.net/efx7rp4n/</a></p>
  
  <p>Source:</p>
  
  <pre><code>&lt;div class="container"&gt;
  
    &lt;div class="input-group mb-3"&gt;
        &lt;div class="input-group-prepend"&gt;
          &lt;span class="input-group-text"&gt;Long descriptive text:&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="input-group-text"&gt;
          &lt;input type="checkbox" aria-label="Checkbox for following text input"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="input-group mb-3"&gt;
        &lt;div class="input-group-prepend"&gt;
          &lt;span class="input-group-text"&gt;Short:&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="input-group-text"&gt;
          &lt;input type="checkbox" aria-label="Checkbox for following text input"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I force my input groups to be of the same width ?</p>
  
  <p>As this is bootstrap, there are of course tons of related questions. This one <a href="https://stackoverflow.com/questions/44044390/bootstrap-input-group-sizes">Bootstrap input group sizes</a> recommends adding <code>size=50</code> as attribute. No effect for me.</p>
  
  <p>This one <a href="https://stackoverflow.com/questions/36802319/bootstrap-input-group-field-not-sizing-correctly">Bootstrap input group field not sizing correctly</a> looked very similar to my problem. But I already tried adding a fixed width over css, it only makes it worse, <code>&lt;div class="input-group mb-3" style="width:150px"&gt;</code> leads to:</p>
  
  <p><a href="https://i.stack.imgur.com/WbJ2k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WbJ2k.png" alt="enter image description here"></a></p>