Right alligned toggle has overflowing label text

[ptlm500]

Right alligned toggle has overflowing label text:

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you're having.

When a Carbon toggle is right aligned the label text is able to overflow.

Eg when the toggle is in a flex parent that has the align-items: flex-end; applied:

Is this issue related to a specific component?
Toggle component https://www.carbondesignsystem.com/components/toggle/

What did you expect to happen? What happened instead? What would you like to
see changed?
Expected: The label text doesn't overflow from the toggle component
Actual: Label text isn't contained within the bx--toggle-input__label element, so always overflows
Desired: Label text should be contained within the bx--toggle-input__label element, so it is possible to right align the toggle component

What browser are you working in?

Observed in Chrome Version 85.0.4183.102, Firefox 68.12.0esr

What version of the Carbon Design System are you using?

        "carbon-components": "^10.3.0",
        "carbon-components-react": "^7.3.0",

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

IBM Netcool Operations Insight

Please create a reduced test case in CodeSandbox

https://codesandbox.io/s/frosty-hooks-o783wx

[tw15egan]

Related: #7210