Bootstrap Dropdown Menu - Multiple Columns Side-by-Side - drop-down-menu

Question

Trying to create a filter on a web page that utilizes Bootstrap's drop-down menu and places the columns side-by-side, but instead it stacks them right now. The filter menu is created dynamically by looping through an array of items I want to create and. each item is a new column I want to place on my menu. I was trying to utilize the grid layout (container > row > column) with the class row-cols-# on my row element but that does not work as I thought it would.
I can force my menu to be a certain width and make the columns position correctly, but then my menu is hardcoded to a certain width on all filter menu regardless of the number of columns. Here is sample of my HTML code that is creating a rather big menu.
Wondering if my d-flex at the very end is what causes problems for my grid layout
<div
class="ms-auto py-4"
id="PageFilter"
>
<div class="dropdown filter">
<button
class="btn btn-outline-secondary d-flex align-items-center dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
>
<img
src="/static/icons/bootstrap/sliders2.svg"
class="me-2"
height="25"
/>
Filter
<span class="badge bg-danger ms-4">0</span>
</button>
<div class="dropdown-menu dropdown-menu-end shadow" style="">
<form action="/ajax/page_filter/" method="GET" class="filter">
<div class="container">
<div class="row">
<div class="col-sm-auto">
<h6 class="dropdown-header">Region</h6>
<hr class="mt-0" />
<div
class="overflow-y-auto filter-list"
style="max-height: 400px"
>
<div class="row align-items-center mx-2">
<div class="form-check">
<input/>
<label class="form-check-label" for="filter-0-0">
ITEM 1
</label>
</div>
</div>
<div class="row align-items-center mx-2">
<div class="form-check">
<input/>
<label class="form-check-label" for="filter-0-1">
ITEM 2
</label>
</div>
</div>
</div>
</div>
<div class="col-sm-auto">
<h6 class="dropdown-header">State</h6>
<hr class="mt-0" />
<div
class="overflow-y-auto filter-list"
style="max-height: 400px"
>
<div class="row align-items-center mx-2">
<div class="form-check">
<input/>
<label class="form-check-label" for="filter-1-0">
ITEM 1
</label>
</div>
</div>
<div class="row align-items-center mx-2">
<div class="form-check">
<input/>
<label class="form-check-label" for="filter-1-1">
ITEM 2
</label>
</div>
</div>
<div class="row align-items-center mx-2">
<div class="form-check">
<input/>
<label class="form-check-label" for="filter-1-2">
ITEM 3
</label>
</div>
</div>
<div class="row align-items-center mx-2">
<div class="form-check">
<input/>
<label class="form-check-label" for="filter-1-3">
ITEM 4
</label>
</div>
</div>
<div class="row align-items-center mx-2">
<div class="form-check">
<input/>
<label class="form-check-label" for="filter-1-4">
ITEM 5
</label>
</div>
</div>
<div class="row align-items-center mx-2">
<div class="form-check">
<input/>
<label class="form-check-label" for="filter-1-5">
ITEM 6
</label>
</div>
</div>
<div class="row align-items-center mx-2">
<div class="form-check">
<input/>
<label class="form-check-label" for="filter-1-6">
ITEM 7
</label>
</div>
</div>
<div class="row align-items-center mx-2">
<div class="form-check">
<input/>
<label class="form-check-label" for="filter-1-7">
ITEM 8
</label>
</div>
</div>
</div>
</div>
<div class="col-sm-auto">
<h6 class="dropdown-header">TSC</h6>
<hr class="mt-0" />
<div
class="overflow-y-auto filter-list"
style="max-height: 400px"
>
<div class="row align-items-center mx-2">
<div class="form-check">
<input/>
<label class="form-check-label" for="filter-2-0">
ITEM 1
</label>
</div>
</div>
<div class="row align-items-center mx-2">
<div class="form-check">
<input/>
<label class="form-check-label" for="filter-2-1">
ITEM 2
</label>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-end mt-4">
<button type="reset" class="btn btn-sm btn-warning clear-filter">
Clear Filter
</button>
<button type="submit" class="btn btn-sm btn-danger ms-2">
Submit
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
UPDATE
I've included my current example here Filter Menu Help