title: Force input group to fully be visible and not wrap in a table cell
body: <p>I have an input group with an input and button placed in a table cell, however, the button wraps below a certain size.I want to prevent this behaviour, specifically for this table cell and the rest of the column. The relavant generated html (javascript added element):</p>
  <pre><code>&lt;div id=&quot;inspireRecords&quot; class=&quot;table-responsive&quot;&gt;
  &lt;table class=&quot;table table-sm&quot; id=&quot;inspireTable&quot;&gt;&lt;thead&gt;&lt;tr&gt;
          &lt;th&gt;Title
          &lt;i onclick=&quot;sort_table(&amp;quot;#inspireTable&amp;quot;,0)&quot; class=&quot;fas fa-sort&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
          &lt;/th&gt;
          .
          .
          .
          &lt;th&gt;Projects&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;
      &lt;td data-sort=&quot;n-flation&quot; class=&quot;title&quot;&gt;N-flation&lt;/td&gt;
      .
      .
      .
      &lt;td&gt;
          &lt;div class=&quot;input-group p-0&quot;&gt;
              &lt;select class=&quot;form-select projectSelect&quot;      
                  &lt;option value=&quot;0&quot; selected=&quot;&quot;&gt;Choose...&lt;/option&gt;
                  &lt;option value=&quot;1&quot;&gt;Test&lt;/option&gt;
                  &lt;option value=&quot;2&quot;&gt;Test 2&lt;/option&gt;
                  &lt;option value=&quot;3&quot;&gt;Test 3&lt;/option&gt;
              &lt;/select&gt;
              &lt;button class=&quot;btn btn-primary projectSelectBtn&quot; type=&quot;button&quot;&gt;Add&lt;/button&gt;
          &lt;/div&gt;
      &lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;
  &lt;/table&gt;&lt;/div&gt;
  </code></pre>
  <p>Custom CSS (which will apply):</p>
  <pre><code>th {
      white-space: nowrap;
  }
  
  div {
      padding: 0.5rem 0;
  }
  </code></pre>
  <p>What it currently looks like:</p>
  <p><a href="https://i.stack.imgur.com/eSOv0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eSOv0.png" alt="wrapping" /></a></p>
  <p>What I always want it to be like even if it requires scrolling:</p>
  <p><a href="https://i.stack.imgur.com/ABgCR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ABgCR.png" alt="shrinking" /></a></p>
  <p>I would welcome other ideas too if it seems like bad design as I am a beginner.</p>