Change Accordions to Use Flexbox

[danahertzberg]

Motivation

I want to use flexbox in the display of Accordions to be more.. flexible. And in line with Bootstrap's direction.

Is your feature request related to a problem? Please describe.

Follow up to #1198

Proposed Resolution

Describe the solution you'd like

Change CSS to the flexbox solution and update the Quickstart template to allow for new changes.

SO.. I can't remember how to test locally. BUT I may have a solution. What if we:

1. Revert to my CSS in this PR
2. Add the nested hover and span.title css below

   .btn {
      display: flex;
      width: 100%;
      padding: .75rem 1.25rem;
      color: $dark-silver;
      text-align: left;
      text-transform: none;
      justify-content: space-between;
      align-items: center;
   
      &:hover {
        text-decoration: none;
   
        span.title {
            text-decoration: underline;
          }
          
      }
   

3. Add the <span class="title"> around {{ title }} in the file https://github.com/az-digital/az_quickstart/blob/main/modules/custom/az_accordion/templates/az-accordion.html.twig

[joeparsons]

We could also consider this being a 5.x only enhancement since Accordions in upstream Bootstrap 5.x already use flexbox.