[RangePicker] Make text separator correctly aligned vertically

[good-jinu]

• Update style of MultiInput...RangeField Root and Seperator

• I have followed (at least) the PR section of the contributing guide.

Fixes #15847

Root cause

The root cause of this issue is the misalignment of the three elements. They are currently centered based on the height of the TextField element, which includes the helper text. This is causing the elements to appear misaligned when the helper text is present or has varying lengths.

What is changed

• 3 MultiInput...RangeField Files
  • MultiInputDateRangeField
  • MultiInputDateTimeRangeField
  • MultiInputTimeRangeField : This feature isn't implemented yet. But it needed to be modified as the same issue occurs
• Set three elements aligned to top
• Set seperator padding value as same as picker TextField Component.

To minimize additional bugs and PR, I chose the simplest method.

Before

codesandbox

After

codesandbox

[mui-bot]

Deploy preview: https://deploy-preview-15981--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 326b7c3

[flaviendelangle]

This approach does not work when you use size: "small" on the text field
Which is probably as commin as the helper text so I don't think it's a good trade-off 😬

[good-jinu]

@flaviendelangle
Thank you for the feedback!
To resolve this issue stably, we might need to modify the TextField in the upstream package. Since further investigation is required, I think it would be best to close the PR for now.