title: Bootstrap 4 set a width of input-group inputs
body: <p>Can you help me with this problem? I have an <code>input-group</code> within <em>bootstrap 4</em>. In my <code>input-group</code> I have 2 inputs, first with prepend and second with append.</p>
  
  <p>It's wrapped in a <code>col-12</code> <code>div</code> in a <code>form-group</code> and I need to set the <code>width</code> of the first input and second to some specific (but different) value. I tried to set the <code>width</code> in my custom css, but without success. Is it possible? I know, that I can set it via wrapping it in a div with another col, but than I have both input below and not side by side.</p>
  
  <p>Code: </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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
  
   &lt;div class="form-group"&gt;
      &lt;label for="telephone"&gt;Telephone&lt;/label&gt;
        &lt;div class="row"&gt;
           &lt;div class="col-12"&gt;
              &lt;div class="input-group telephone-input"&gt;
                &lt;div class="input-group-prepend preselection-prepend"&gt;
                    &lt;div class="input-group-text"&gt;+&lt;/div&gt;
                &lt;/div&gt;
                &lt;input class="form-control" id="preselection" type="text" maxlength="3" name="preselection" placeholder="Preselection" autocomplete="off" required&gt;
                &lt;input class="form-control" id="telephone" placeholder="Telephone number" type="tel" maxlength="11" name="telephone" autocomplete="off" required&gt;
                &lt;span class="placeholder" id="tele-holder"&gt;&lt;/span&gt;
                &lt;div class="input-group-append" id="preselectionToggle"&gt;
                &lt;div class="input-group-text"&gt;
                   &lt;i class="far fa-plus-square"&gt;&lt;/i&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
         &lt;/div&gt;
       &lt;/div&gt;
    &lt;/div&gt;
      
  &lt;script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"&gt;&lt;/script&gt;   </code></pre>
  </div>
  </div>
  </p>