Align 2 different elements inside an accordion button – Bootstrap 5

Issue

I’m using Bootstrap 5 and am trying to align a <p> tag and a <span> to the left and right, respectively.
I’ve tried a bunch of different things and I can’t make them go to opposite directions if they’re inside the button tag. Maybe this is by design but I thought I’d try it here.
Here’s my code:

<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>&nbsp;&nbsp;&nbsp;&nbsp;<p>Some text goes here.</p>
            </div>
        </div>
    </div>
</div>

I get the following result (everything is aligned to the left).

As simple as it may sound, I couldn’t make it work after browsing the web for solutions. Any pointers would be appreciated.

Solution

For aligning the child element at both ends you can use bootstarp d-Flex class

    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button d-flex justify-content-between align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2"
                aria-expanded="true" aria-controls="collapse2">
                <p class="h5 mb-0 flex-grow-1">Grade 2</p>
                <span class="h5 mb-0 pr-3">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>&nbsp;&nbsp;&nbsp;&nbsp;<p>Some text goes here.</p>
            </div>
        </div>
    </div>
</div>```

Answered By – Ritesh Rohan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0