I am struggling to create a compact inline form on a web page featuring search filters and two buttons for submitting and resetting. Whenever I position the form fields above the buttons, they become misaligned. How can I ensure that everything stays in-line below the labels?
<div class="row g-3 align-text-bottom">
<form class="row row-cols-md-auto g-3 align-items-center" name="frmRequestSearch" id="frmRequestSearch" method="post" action="#cgi.script_name#">
<div class="col-sm-7">
<label class="form-label">ID</label>
<input type="text" name="cardholder_id" id="id" class="form-control" value="#form.cardholder_id#" placeholder="ID">
</div>
<div class="col-sm">
<label class="form-label">CG</label>
<select class="form-select" name="cardholder_group" value="#cg#" id="cg">
<option></option>
<cfloop query="qryAllGroups">
<option value="#displayname#">#displayname#</option>
</cfloop>
</select>
</div>
<div class="col-sm">
<button type="submit" name="submit" class="btn btn-secondary">Show Results</button>
</div>
<div class="col-sm">
<a href="/views/requests" class="btn btn-secondary">Reset Parameters</a>
</div>
</form>
</div>