title: Bootstrap 5: Table in a second column jumps below the first column
body: <p>I have a grid layout with some navigation pills in the left column set to &quot;col-auto&quot; because I want these to only take up the space of the content's natural width.</p>
  <p>In the second table I want to have a large table with horizontal scrollbar. I'm able to achieve this except the table always jumps below the navigation bar and I can't get it to be rendered to the right.</p>
  <p>See in the attached fiddle: <a href="https://jsfiddle.net/3vxhd6jf/3/" rel="nofollow noreferrer">https://jsfiddle.net/3vxhd6jf/3/</a></p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
     &lt;div class=&quot;row&quot;&gt;
       &lt;div class=&quot;col-auto&quot;&gt; &lt;!-- Should only take up the necessary space --&gt;
         &lt;!-- Nav tabs --&gt;
         &lt;div class=&quot;d-flex align-items-start&quot;&gt;
         .....
         &lt;/div&gt;
       &lt;/div&gt;
       &lt;div class=&quot;col&quot;&gt; &lt;!-- Should take up the rest of the space --&gt;
         &lt;div class=&quot;tab-content&quot;&gt;
           &lt;div class=&quot;tab-pane active&quot; id=&quot;tab-data&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;nav-data&quot;&gt;
             &lt;div id=&quot;div-data-container&quot; class=&quot;mb-3 table-responsive&quot;&gt;
               &lt;!-- The table --&gt;
               &lt;table class=&quot;table table-sm table-striped&quot;&gt;
               .....
               &lt;/table&gt;
             &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;    
  </code></pre>
  <p>What I would like to achieve is to render the table to the right of the navigation pills, just like the textarea is rendered when you click the 'JSON' pill.</p>
  <p>Can you please help?</p>