[Toggle] The parent container of the toggle with label has a fixed width which does not take the label’s width into consideration

[cheer021]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you're having.

The parent container of the toggle with the label has a fixed width which does not take the label’s width into consideration.

Is this issue related to a specific component?

Toggle

What did you expect to happen? What happened instead? What would you like to
see changed?

In theory, the width of the container (bx---toggle--switch) is not correct which results in the container which holds the toggle label has a wrong width. The toggle label can be cut off.
Consumers can put a fixed width (eg. 3rem) to fix it but it would not work for the different locales for the same string

What browser are you working in?

Chrome v86 but this is a cross-browser issue

What version of the Carbon Design System are you using?

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

IBM Cognos Analytics

Steps to reproduce the issue

1. Go to the Carbon system page and find the Toggle component
2. Inspect the element of bx--toggle--switch

Please create a reduced test case in CodeSandbox

• Style and vanilla JS:
  https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox
• React:
  https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

Additional information

• Screenshots or code
• Notes

Chatted with Carbon team on Slack: conversation is here https://ibm-analytics.slack.com/archives/C2K6RFJ1G/p1604362026377600