[DateRangePicker] Fix vertical alignment for multi input fields (#16489)

Author: noraleonte

packages/x-date-pickers-pro/src/internals/utils/createMultiInputRangeField/createMultiInputRangeField.tsx

@@ -39,7 +39,7 @@ export function createMultiInputRangeField<TManager extends PickerAnyRangeManage
 
   const MultiInputRangeFieldRoot = styled(
     React.forwardRef((props: StackProps, ref: React.Ref<HTMLDivElement>) => (
-      <Stack ref={ref} spacing={2} direction="row" alignItems="center" {...props} />
+      <Stack ref={ref} spacing={2} direction="row" alignItems="baseline" {...props} />
     )),
     {
       name,

packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx

@@ -113,7 +113,8 @@ const PickersInputBaseSection = styled(PickersSectionListSection, {
   fontSize: 'inherit',
   letterSpacing: 'inherit',
   lineHeight: '1.4375em', // 23px
-  display: 'flex',
+  display: 'inline-block',
+  whiteSpace: 'nowrap',
 }));
 
 const PickersInputBaseSectionContent = styled(PickersSectionListSectionContent, {