How can I prevent Bootstrap list-inline inside dropdown-menu from wrapping?

In this snippet, the By date row splits onto two lines, "Recent first" on the first and "Oldest first" on the second.

I used .list-inline to try to force the items onto one line but it still wraps.

How do I make it so that there are only two rows, like this:

    By title:  A-Z     Z-A
    By a much 
longer field:  Recent first    Oldest first

Note that the left-hand column is an equal size and right-justified. This should be the case regardless of the width of the column. It's ok to wrap the left hand column. If wrapped, the right-hand column values should be vertically aligned to the middle (not represented above).

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group">
    <button class="btn btn-primary-soft btn-sm dropdown-toggle show" type="button" data-bs-toggle="dropdown" aria-expanded="true">
        <i class="fa-solid fa-fw fa-sort me-1"></i>
        <span> By title: A-Z  </span> 
    </button>
    <div class="dropdown-menu" data-popper-placement="bottom-start">
        <div class="row">
            <div class="dropdown-item-text col-4 text-end pe-0 fw-bold">By Title:</div>
            <div class="col">
                <ul class="list-inline">
                    <li class="list-inline-item">
                        <a type="button" rel="sort-by" class="dropdown-item link-primary ps-2 pe-2  disabled active">A-Z</a>
                    </li>
                    <li class="list-inline-item">
                        <a rel="sort-by" class="dropdown-item link-primary ps-2 pe-2 text-decoration-underline" href="javascript:;" type="button">Z-A</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="dropdown-item-text col-4 text-end pe-0 fw-bold">By a much longer field:</div>
            <div class="col">
                <ul class="list-inline">
                    <li class="list-inline-item">
                        <a rel="sort-by" class="dropdown-item link-primary sort-link ps-2 pe-2  text-decoration-underline" href="javascript:;" type="button">Recent first</a>
                    </li>
                    <li class="list-inline-item">
                        <a rel="sort-by" class="dropdown-item link-primary sort-link ps-2 pe-2  text-decoration-underline" href="javascript:;" type="button">Oldest first</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

I've tried playing with flex and nowrap classes but to no avail - the entries can be made to exist on one line but the issue seems to be that the .dropdown-menu .row elements' width doesn't expand to fit all the content within, so it overflows.

Solution

on the first div with div class="dropdown-menu" add

width: max-content

then i changed .row > *'s max-width from 100% to

.row > * {
    ...
    max-width: fit-content;
    ...
}

The second change applies to bootstrap so you need !important.

.dropdown-menu { width: max-content }
.row > * { max-width: fit-content !important; }
/* Remove width from columns. */
div[class^="col-"], div[class*=" col-"] { width: auto !important; }

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group">
    <button class="btn btn-primary-soft btn-sm dropdown-toggle show" type="button" data-bs-toggle="dropdown" aria-expanded="true">
        <i class="fa-solid fa-fw fa-sort me-1"></i>
        <span> By title: A-Z  </span> 
    </button>
    <div class="dropdown-menu" data-popper-placement="bottom-start">
        <div class="row">
            <div class="dropdown-item-text col-4 text-end pe-0 fw-bold">By Title:</div>
            <div class="col">
                <ul class="list-inline">
                    <li class="list-inline-item">
                        <a type="button" rel="sort-by" class="dropdown-item link-primary ps-2 pe-2  disabled active">A-Z</a>
                    </li>
                    <li class="list-inline-item">
                        <a rel="sort-by" class="dropdown-item link-primary ps-2 pe-2 text-decoration-underline" href="javascript:;" type="button">Z-A</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="dropdown-item-text col-4 text-end pe-0 fw-bold">By very long datum:</div>
            <div class="col">
                <ul class="list-inline">
                    <li class="list-inline-item">
                        <a rel="sort-by" class="dropdown-item link-primary sort-link ps-2 pe-2  text-decoration-underline" href="javascript:;" type="button">Recent first</a>
                    </li>
                    <li class="list-inline-item">
                        <a rel="sort-by" class="dropdown-item link-primary sort-link ps-2 pe-2  text-decoration-underline" href="javascript:;" type="button">Oldest first</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>