diff --git a/packages/react/src/components/DatePickerInput/DatePickerInput.tsx b/packages/react/src/components/DatePickerInput/DatePickerInput.tsx
index 89b237cb3094..25c81467f073 100644
--- a/packages/react/src/components/DatePickerInput/DatePickerInput.tsx
+++ b/packages/react/src/components/DatePickerInput/DatePickerInput.tsx
@@ -216,13 +216,15 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(
         </label>
       )}
       <div className={wrapperClasses}>
-        {input}
-        {isFluid && <DatePickerIcon datePickerType={datePickerType} />}
-        <DatePickerIcon
-          datePickerType={datePickerType}
-          invalid={invalid}
-          warn={warn}
-        />
+        <span>
+          {input}
+          {isFluid && <DatePickerIcon datePickerType={datePickerType} />}
+          <DatePickerIcon
+            datePickerType={datePickerType}
+            invalid={invalid}
+            warn={warn}
+          />
+        </span>
       </div>
       {invalid && (
         <>
diff --git a/packages/styles/scss/components/date-picker/_date-picker.scss b/packages/styles/scss/components/date-picker/_date-picker.scss
index d2bffe89202e..a1fd936451b4 100644
--- a/packages/styles/scss/components/date-picker/_date-picker.scss
+++ b/packages/styles/scss/components/date-picker/_date-picker.scss
@@ -51,11 +51,14 @@
   }
 
   .#{$prefix}--date-picker-input__wrapper {
-    position: relative;
     display: flex;
     align-items: center;
   }
 
+  .#{$prefix}--date-picker-input__wrapper span {
+    position: relative;
+  }
+
   .#{$prefix}--date-picker.#{$prefix}--date-picker--simple
     .#{$prefix}--date-picker__input,
   .#{$prefix}--date-picker.#{$prefix}--date-picker--simple .#{$prefix}--label {
diff --git a/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss b/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss
index bfd9a97f0347..08982719657a 100644
--- a/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss
+++ b/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss
@@ -60,6 +60,12 @@
     white-space: nowrap;
   }
 
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-input__wrapper
+    > span {
+    inline-size: 100%;
+  }
+
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker-input__wrapper
     .#{$prefix}--date-picker__input {