React Bootstrap Tabs - evenly spaced across full width of div

I have a bootstrap tab bar as follows:

<div>
          <Tabs defaultActiveKey="profile" id="uncontrolled-tab-example" style={style1}>
            <Tab eventKey="policies" title="Policies" style={style2}>
            slakf lsjdflkadsjf lkadkfdksjflk lakdffj lsdjlk lkdfk kldnfkjk lasdfj lksdfjkajfl lkadjflkadlkf ksdjflkajsf
            </Tab>
            <Tab eventKey="reporting" title="Reporting" style={style2}>
            d
            </Tab>
            <Tab eventKey="dashboard" title="Dashboard" style={style2}>
            f
            </Tab>
            <Tab eventKey="editProfile" title="Manage Profile" style={style2}>
            f
            </Tab>
            <Tab eventKey="community" title="Community" style={style2}>
            f
            </Tab>
          </Tabs>
        </div>

I am trying to figure out how to space the tabs evenly across the full width of the div. Currently they are bunched on the left hand side. I can't even force them on the right side.

Reducing the width of the Tabs element also reduces the width of the tab content - which I want to avoid.

Currently, I have tried:

const style1 = {
    fontSize: '90%',
    marginLeft: 'auto',
    textAlign: 'center',
    marginRight: 'auto',
    float: 'justify',
    width: '80%'
}  

const style2 = {
    textAlign: 'center',

}

I have read other posts where users have given up trying and they suggest to use tables instead of tabs. Is there an option that allows the use of tabs with evenly justified width of tabs?

You can try flex to achieve this,

const style1 = {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  margin: 0;
  padding: 0;
}

const style2 = {
  flex: 1;
  text-align: center;
}