I've been working with the following "template", and there are multiple cards like this on the settings page I'm currently developing.
<!-- 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 challenge I'm facing is that when <li> elements other than text are added to the card, it affects the spacing. How can I ensure that all these elements have consistent height/spacing without having to manually adjust each one? I'm not sure what styling to use in my <style> section of the page.