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 https://github.com/az-digital/arizona-bootstrap/pull/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.