Align 2 different elements inside an accordion button

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.

CodePudding user response：

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>```

CodePudding user response：

It is because your button has display:flex try setting that to display:block and there you go.

.accordion-item .accordion-button {
    display: block;
}
.accordion-button:not(.collapsed)::after {
background-image: url(data:image/svg xml,);
transform: rotate(
-180deg);
position: absolute;
right: 0;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<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>

However, you have to re-position your background (::after) for the button