title: Bootstrap 4 - horizontal aligned accordion
body: <p>I've been looking for a way to build an <a href="https://getbootstrap.com/docs/4.3/components/collapse/" rel="nofollow noreferrer">accordion</a> in <a href="https://getbootstrap.com/docs/4.0/getting-started/introduction/" rel="nofollow noreferrer">Bootstrap 4</a> that arranges each panel left to right, instead of top to bottom. Additionally, I'm trying to find a solution that will rotate the clickable headers 90 degrees and to the left of the content. </p>
  
  <p>I've seen this post from a while ago: </p>
  
  <p><a href="https://stackoverflow.com/questions/12498476/twitter-bootstrap-collapse-plugin-direction-horizontal-instead-of-vertical/44070096#44070096">Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical</a></p>
  
  <p>But none of the solutions appear to be working, or for an accordion. Ideally, the accordion would fill the <code>width</code> of the container and maintain that <code>width</code>. I mocked up what it would look like in two states:</p>
  
  <p><a href="https://i.stack.imgur.com/jA9bO.png" rel="nofollow noreferrer">State One</a></p>
  
  <p><a href="https://i.stack.imgur.com/ynfue.png" rel="nofollow noreferrer">State Two</a></p>