I am currently working with Bootstrap 5 and facing a challenge in aligning a <p> tag and a <span> to the left and right, respectively.
Despite trying various approaches, I am unable to achieve the desired outcome of having them move in opposite directions when enclosed within a button tag. It appears to be a limitation in the design, but I wanted to seek assistance here.
Below is the code snippet I am using:
<div class="accordion" id="accordion2">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2"
aria-expanded="true" aria-controls="collapse2">
<p class="h5 float-start">Grade 2</p>
<span class="h5 float-end">1 <i class="fas fa-book"></i></span>
</button>
</h2>
<div id="collapse2" class="accordion-collapse collapse" aria-labelledby="heading2" data-bs-parent="#accordion2">
<div class="accordion-body" style="padding-bottom:0px;">
<a href="http://localhost:8000/cm/unit/3" class="h5">Unit 1</a> <p>Some text goes here.</p>
</div>
</div>
</div>
</div>
Upon execution, I observed that the content is consistently aligned to the left. https://i.sstatic.net/i2LO5.png
Despite my efforts to find a solution online, I have not been successful in rectifying this issue. Any guidance or suggestions would be greatly appreciated.