My issue lies with the content width of my tab panels - specifically, it doesn't work well with columns. I am unable to divide a tab-pane as col-md-7 and col-md-5 (refer to the screenshot below). I am unsure of how to resolve this issue.
<div class="container py-5">
<div class="row py-3">
<div class="col-lg-12">
<div class="card h-100">
<div class="card-header py-3"><b>Działalność</b> | Zarządzanie</div>
<div class="card-body">
<div id="zarzadzanie" class="zarzadzanie d-flex align-items-start">
<div class="nav flex-column nav-pills me-5" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active my-2" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">
Podstawowe</button>
<button class="nav-link my-2" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">
Kolorystyka</button>
<button class="nav-link my-2" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">
Adresy</button>
<button class="nav-link my-2" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">
Historia</button>
</div>
<!-- TAB-CONTENT -->
<div class="tab-content" id="v-pills-tabContent">
<!-- Setting 1 --->
<div class="tab-pane fade show active pt-2" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<div class="row pb-2">
<div class="col-md-7">
<p>Tabs can be used to contain </p>
</div>
<div class="col-md-5">dsdas</div>
</div>
</div>
<!-- Setting 2 --->
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
</div>
<!-- Setting 3 --->
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">>
</div>
<!-- Setting 4 --->
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">>
</div>
<!-- END TAB-CONTENT-->
</div>
<!-- </> END TAB-CONTENT-->
</div>
</div>
</div>
</div>
</div>
</div>
Your assistance would be greatly appreciated. Thank you.