fix: 10502-radio-button-misalignment-bug

[riddhybansal]

Closes #10502

The error message in the radio button overlaps the label.

Changelog

New

• Changed some styles

Testing / Reviewing

• Check If the error message does not overlap the radio button label by pressing the submit and make sure none of the radio button is selected to trigger the error message.
• Check test storybook under RadioButton / Test: https://deploy-preview-15435--v11-carbon-react.netlify.app/?path=/story/components-radiobutton--test
• Please make sure to remove Test storybook before merging

[github-actions]

DCO Assistant Lite bot All contributors have signed the DCO.

[riddhybansal]

I have read the DCO document and I hereby sign the DCO.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	80d288b
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/65d3ab2be83469000855c2d4
😎 Deploy Preview	https://deploy-preview-15435--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[guidari]

LGTM! 🚀

[tay1orjones]

Looks good in chrome and firefox, but safari still covers up the label.

This comment mentions the input dimensions could be something to look into, have you explored that angle compared with the margin approach you've got here so far?

[tay1orjones]

Tested in chrome, firefox, and safari on macOS - everything looks great. Before we can merge the test story should be deleted. Once removed, this is ready to merge. I think removing it should also fix the merge conflict.

[brunnerh]

Checkbox still has this issue as mentioned in my comment from #10002, by the way.