I'm having trouble aligning two elements on opposite ends of a div container using Bootstrap's justify-content-between class. The h4 element is not on the left and the button on the right as expected. I am using Bootstrap 5.2.3. Can anyone help me with this issue? Thank you. You can view the code here.
<div class="container">
<div class="row" id="paytable-heading">
<div class="col justify-content-between">
<h4>Pay Tables</h4>
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
id="modalButton"
>
Enter New Pay Rates
</button>
<hr>
</div>
</div>
</div>