Repository: material-ui
Issue: n Dividers with same textAlign value do not line up
Labels: new feature,component: divider

<!-- Provide a general summary of the issue in the Title above -->
If you have _n_ `<Divider />` components all with the same `textAlign` property set, the text for each does not line up. 

<!--
  Thank you very much for contributing to MUI by creating an issue! ❤️
  To avoid duplicate issues we ask you to check off the following list.
-->

<!-- Checked checkbox should look like this: [x] -->

- [X] The issue is present in the latest release.
- [X] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Current Behavior 😯

<!-- Describe what happens instead of the expected behavior. -->
Currently if you set the `textAlign="left"` prop for the `<Divider />` and the text within the divider is variable in length, the texts within the separate dividers do not line up.
```
const StyledDivider = styled(Divider)(({}) => ({
  '&::before': {
    width: 30,
  }
}));

// down in the jsx
<StyledDivider textAlign="left">TEXT</StyledDivider>
<StyledDivider textAlign="left">LONGER TEXT</StyledDivider>
```
From above, the two `::before` portions of the border are different lengths because the text is different length

## Expected Behavior 🤔

<!-- Describe what should happen. -->
I think that if it is either `textAlign="left"` or `textAlign="right"` the text should start or end in the same place respectively. Even if you modify the pseudo selectors for `::before` while `textAlign="left"` the width of the `border` is not set as the value.

## Steps to Reproduce 🕹

<!--
  Provide a link to a live example (you can use codesandbox.io) and an unambiguous set of steps to reproduce this bug.
  Include code to reproduce, if relevant (which it most likely is).

  You should use the official codesandbox template as a starting point: https://mui.com/r/issue-template-next

  If you have an issue concerning TypeScript please start from this TypeScript playground: https://mui.com/r/ts-issue-template

  Issues without some form of live example have a longer response time.
-->

https://stackblitz.com/edit/react-nd3ref?file=demo.tsx

If you set the `::after` selector as a finite pixel width they `::before` section does line up, but you don't actually know the width you need for the `::after` - you just want it to fill the rest of the width after the text (`100%` / `flexGrow: 1`)
## Context 🔦

<!--
  What are you trying to accomplish? How has this issue affected you?
  Providing context helps us come up with a solution that is most useful in the real world.
-->
The motivation for me is I am using multiple dividers and their text for section headers of a list. I want the text all to line up obviously since they are headers and they should look the same.
![image](https://user-images.githubusercontent.com/8453393/136598356-d6eb9985-b465-4900-a799-03fb335e6bfa.png)


## Your Environment 🌎

<!--
  Run `npx @mui/envinfo` and post the results.
  If you encounter issues with TypeScript please include the used tsconfig.
-->
Using the latest of everything - npm/mui/chrome