django-bootstrap5 and button alignment - django

Question

I want to display a button next to a form instead of below:
This is how it looks:
should look like this:
corresponding code:
form:
class TheForm(forms.Form):
var = forms.ChoiceField(choices = choices, label = "")
temp
late:
{% if TheForm %}
<form method = "post">
{% csrf_token %}
{% bootstrap_form TheForm %}
{% bootstrap_button button_type="submit" content="OK" %}
</form>
{% endif %}
EDIT:
Got it working, but the code only works with one input field:
I imagined it would look like this:
but the produced code looks weird too:
<form method="POST" action="/singleDevice">
<input type="hidden" name="csrfmiddlewaretoken" value="...">
<div class="row">
<div class="col-9">
<div class="col-12">
<select name="env" class="form-select" id="id_env">
<option value="0">A</option>
<option value="3">NB</option>
</select>
</div>
<div class="col-12">
<label class="visually-hidden" for="id_Number">directly enter a number</label>
<input type="text" name="Number" class="form-control" placeholder="directly enter a number" id="id_Number">
</div>
</div>
<div class="col-3">
<button class="btn btn-primary" type="submit">OK</button>
</div>
</div>
</form>

Answer 1

Try bootstrap Grid system,
template.html
{% if TheForm %}
<form method = "post">
{% csrf_token %}
<div class="row"> <!-- creates a row of 12 parts -->
<div class="col-lg-9"> <!-- Creates a column with width of 9 parts out of the above 12 parts -->
{% bootstrap_form TheForm %}
</div>
<div class="col-lg-3"> <!-- Creates a column with width of remaining 3 parts out of the above 12 parts -->
{% bootstrap_button button_type="submit" content="OK" %}
</div>
</div>
</form>
{% endif %}
EDIT: CSS TO SET BUTTON AT THE END OF FORM
<form method="POST" action="/singleDevice">
<input type="hidden" name="csrfmiddlewaretoken" value="...">
<div class="row">
<div class="col-9">
<div class="col-12">
<select name="env" class="form-select" id="id_env">
<option value="0">PROD</option>
<option value="1">QA</option>
<option value="2">DEV</option>
<option value="3">NB</option>
</select>
</div>
<div class="col-12">
<label class="visually-hidden" for="id_Number">directly enter a number</label>
<input type="text" name="Number" class="form-control" placeholder="directly enter a number" id="id_Number">
</div>
</div>
<div class="col-3">
<button class="btn btn-primary form-submit-button" type="submit">OK</button>
</div>
</div>
</form>
base.css:
.form-submit-button{
display: inline-block;
margin-top: 95%; /* (approx) */
}
CHANGES: I have set a classname to the submit button and pushed the submit button to the bottom end of the y-axis using margin-top (percentage ensures that it stays below even on resizing)