Same size <li> elements in bootstrap cards

Question

I have the following "template" I'm working with, there are many of such cards on the settings page I'm building.

<!-- Card template -->
<div class="card mt-3 shadow-sm">
    <div class="card-header">
        <b>Header</b>
    </div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item d-flex justify-content-between align-items-center">
            Button
            <a class="btn btn-sm btn-outline-secondary ms-auto" type="button">
                View
            </a>
        </li>
        <li class="list-group-item">...</li>
        <li class="list-group-item">...</li>
        <li class="list-group-item">...</li>
        <li class="list-group-item">
            <div class="container-fluid ps-0 pe-0">
                <div class="row d-flex align-items-center justify-content-between">
                    <div class="col-6">
                        Selector
                    </div>
                    <div class="col-5">
                        <div style="width: 100%" class="form-switch ms-auto">
                            <select class="form-select">
                                <option value="">Test</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

The issue I'm running into here, is that when <li> elements besides text are added to the card, the spacing changes. How can set all these elements to the same height/spacing, without needing to change hundreds of them individually? I'm not sure what to put for my page <style>