Radio button group: needs relative positioning when used inside a scrolling element

[matthewgallo]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you're having.
When using the RadioButtonGroup and RadioButton components together in an element that has scrolling content, the input element from the RadioButton gets positioned absolutely based on some containing element that is not the radio button wrapper. This behavior causes an additional scrollbar to unintentionally show and causes layout issues.

Is this issue related to a specific component?
Yes
RadioButtonGroup
RadioButton
What did you expect to happen? What happened instead? What would you like to
see changed?
I expected that .bx--radio-button-wrapper should have position: relative;. Adding the relative positioning to .bx--radio-button-wrapper fixes this issue.
What browser are you working in?
Chrome
What version of the Carbon Design System are you using?
carbon-components-react: 7.37.0
carbon-components: 10.37.0

Steps to reproduce the issue

1. Have a scrolling element with radio button group and radio buttons inside of it
2. Toggle between radio buttons
3. At this point, there should be an extra scroll bar that has appeared because of the position of the input element from the RadioButton

Please create a reduced test case in CodeSandbox
https://codesandbox.io/s/carbon-radio-button-position-bug-b0g29?file=/src/App.js

Additional information

• Screenshots or code
  See extra scrollbar because of positioning of input element from RadioButton
  
  Adding position: relative; to .bx--radio-button-group fixes issue