Bootstrap 5 cccordion icon will not stay right justified when collapsed

Question

I'm new to HTML / CSS development and building a portfolio website.

I've added accordion button and accordion icon (positioned to the right of the button) with rotation animation to the Bootstrap 5 portfolio template I'm using. I'm trying to get the accordion icon to stay right justified when expanded or collapsed.

• When expanded, the accordion icon is right justified (desired behavior)
• When collapsed, the accordion icon positions next to the button (not as desired)

Interestingly, this section behaves as expected for @media (max-width: 768px): the icon stays to the right when expanded/collapsed. The issue exists only in widths greater than 768px.

Relevant CSS (from Cursor AI and Stack Overflow troubleshooting)

.resume .resume-item h4 {
  line-height: 18px;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Poppins", sans-serif;
  color: #050d18;
  margin-bottom: 10px;
}

.title {
  padding-bottom: 1%;
  word-wrap: break-word;
}

@media (max-width: 768px) {
  .resume .resume-item,
  .resume .resume-item.collapsed,
  .resume .resume-item.show,
  .resume .resume-item.active,
  .resume .resume-title,
  .resume .resume-item ul,
  .resume .resume-item ul li,
  .resume .resume-item li,
  .resume .resume-item h4,
  .resume .resume-item h5,
  .resume .resume-item:last-child,
  .resume .resume-item ::before
   {
      flex-direction: column !important;
      align-items: relative !important;
    }
  }

@media (max-width: 768px) {
  .title
    {
      flex-direction: column !important;
    }
  } 

.accordion-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-button.collapsed .accordion-icon {
  position: absolute;
  right: 0;
  transform: rotate(0deg);
  transition: transform 0.2s ease-in-out;
}

.accordion-button:not(.collapsed) .accordion-icon {
  position: absolute;
  right: 0;
  transform: rotate(180deg);
  transition: transform 0.2s ease-in-out;
}

.accordion-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease-in-out;
  margin-right: auto;
}

@media (min-width: 1024px) {
  .accordion-icon {
   position: absolute;
  }
}

@media (min-width: 1024px) {
  .title
  .resume .resume-item h4
    {
      flex-direction: column !important;
    }
  } 

.accordion-button:after {
  order: 0; 
  margin-left:20px; 
  margin-right:20px; 
}

Sample HTML where accordion applied (unnecessary text removed)

<div data-aos="fade-up" data-aos-delay="100">
            <h3 class="resume-title">Professional Experience</h3>
                <div class="resume-item">
                <div class="accordion-item">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
                  <h4><span class="title">Group Product Manager</span></h4>
                  <span class="accordion-icon bi bi-chevron-down"></span>
                </button>
                <h5>dates...</h5>
                <p><em>company...</em></p>
              <div id="collapseOne" class="accordion-collapse collapse">
                <ul>
                <li>text.../li>
                  </ul>
                </ul>
                </div>
              </div>
            </div>

I've attempted multiple changes with Cursor and Stack Overflow, including adding !important to .accordion-icon elements and applied multiple changes to the .accordion-icon position, as well as these options for the button:

.accordion-button {
  position: relative;
  right: 0;
  top: 50%
  transform: translateY(-50%)
}

and 

.accordion-button .accordion-icon {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

I moved from within the h4 element in HTML to outside of it (as currently represented in sample code), no change.

Adding to my HTML did not resolve the icon position issue (removed from code).

Adding d-flex to the resume div class and and ms-auto to the accordion span class pushed all of the content below the button to the right, creating two columns instead of pushing the icon (only) to the right.

Adding text-left introduced a bug that caused the button to overlap the elements below it and jump the h4 and accordion icon up and down the page when expanded/collapsed. I've since remedied that issue in the above code sample (removed from code).

Thank you for your help!