title: HTML table cell contents are wrapping when using Bootstrap CSS
body: <p>Within a HTML table cell, I have a text input element, followed by some standard text. I want both items to be inline. </p>
  
  <p>This works fine until I import bootstrap.css, at which point the items are shown on separate lines, as if a line break exists between them. </p>
  
  <p>I am unsure on how to "override" whatever styling bootstrap is applying. </p>
  
  <p>Please see my JS Fiddle below. I have included the bootstrap.min.css resource. </p>
  
  <p>You can see that the text input field and string "m" are on separate lines within each cell. </p>
  
  <p>Once you remove the Bootstrap.css external resource, and press run again, the items are inline.</p>
  
  <p>How can I override whatever styling the Bootstrap CSS is applying? (I need Bootstrap CSS for other things).</p>
  
  <p>Thanks</p>
  
  <p><a href="https://jsfiddle.net/87tdupys/9/" rel="nofollow noreferrer">https://jsfiddle.net/87tdupys/9/</a></p>
  
  <pre><code>&lt;!--Desired: text input field plus text "m" inline. However, Bootstrap.min.css is causing the 2 items to display on separate lines. This can be shown by removing the external reference to bootstrap.min.css (in the left hand External Resources pane). How can I override this behaviour, and force the 2 items to be inline?--&gt;
  
  &lt;table id='assetConfigLayoutTable' border='1px'&gt;
  
    &lt;tr&gt;
      &lt;td&gt;
        &lt;label&gt;Capacity A&lt;/label&gt;
      &lt;/td&gt;
      &lt;td style="width:200px"&gt;
        &lt;input type="text" class="form-control" style="width:50px;"&gt; m
      &lt;/td&gt;
  
      &lt;td&gt;
        &lt;label&gt;Capacity B&lt;/label&gt;
      &lt;/td&gt;
      &lt;td style="width:200px"&gt;
        &lt;input type="text" class="form-control" style="width:50px"&gt; m
      &lt;/td&gt;
    &lt;/tr&gt;
  
  &lt;/table&gt;
  </code></pre>