I've set up a grid layout with navigation pills in the left column styled as "col-auto" to only take up the natural width of the content.
However, I'm facing an issue with my large table in the second column. Despite having a horizontal scrollbar, it always jumps below the navigation bar instead of being rendered to the right.
You can see the problem in action in this fiddle: https://jsfiddle.net/3vxhd6jf/3/
<div class="container">
<div class="row">
<div class="col-auto"> <!-- Should only take up the necessary space -->
<!-- Nav tabs -->
<div class="d-flex align-items-start">
.....
</div>
</div>
<div class="col"> <!-- Should take up the rest of the space -->
<div class="tab-content">
<div class="tab-pane active" id="tab-data" role="tabpanel" aria-labelledby="nav-data">
<div id="div-data-container" class="mb-3 table-responsive">
<!-- The table -->
<table class="table table-sm table-striped">
.....
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm looking to have the table render to the right of the navigation pills, similar to how the textarea appears when clicking on the 'JSON' pill. Can you assist with this issue?