How to collapse react-bootstrap accordion panel horizontally?

I am working with the Panel component from React-Bootstrap page here - https://react-bootstrap.github.io/components/panel/ - and i would like to use their accordion feature with the caveat that the panel body's (Panel.Body) opens horizontally (open to the right of the Panel.Headings that are shown).

Here is one of the examples from their page (which i am struggling to have work):

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <PanelGroup accordion id="accordion-uncontrolled-example" defaultActiveKey="2">
        <Panel eventKey="1">
          <Panel.Heading>
            <Panel.Title toggle>Panel heading 1</Panel.Title>
          </Panel.Heading>
          <Panel.Body collapsible>Panel content 1</Panel.Body>
        </Panel>
        <Panel eventKey="2">
          <Panel.Heading>
            <Panel.Title toggle>Panel heading 2</Panel.Title>
          </Panel.Heading>
          <Panel.Body collapsible>Panel content 2</Panel.Body>
        </Panel>
      </PanelGroup>;
    )
  }
}
ReactDOM.render( <
  App / > ,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script>

<div id='root'>
  Come On Work!
</div>

I will work on getting the example working so that it is easier to assist. I am not sure if this is even possible with the react-bootstrap components, so any help is appreciated on this!

Edit - struggling to get snippet working still

Edit 2 - i am working on editing the styles on the classes created by the components. working on using flex display for this. if anyone can help get this example working, happy to update the code. think im close on this

Edit 3 - it could seem that the best way to do this might be to pull the panel-collapse outside of the entire accordion-example , but I do not know to do this.

Edit 4 - fixing the version in the script import of react-bootstrap did not fix my issue with the example above not working... i dont understand why i run into these reproducibility issues in stackoverflow.

Edit 5 - going to bounty this post in an hour, wanted to share update. Also if anyone can please help me understand why my example won't reproduce (due to loading react-bootstrap cdn, or something else?) that would be great! update before bounty:

I have created this (in an app im building) by setting display:flex to the , and margin-left: 2% to the . However, this still looks janky, mainly because the gets bunched up (doesnt stay same width as other . Also, the that opens up horizontally is vertically flush with its own Panel Heading, however i would prefer if the were vertically flush with the top of the TOP Panel.Heading.

Thanks as always for any help - really want this to look sharp / crisp in my app.

edit 6: bounty description should obviously have said 'panels', not 'nav bars' (which i wrote and cannot edit).

from How to collapse react-bootstrap accordion panel horizontally?