fix(calendar): fix calendar icon CSS issue carbon-design-system#16446

.all-contributorsrc

@@ -1587,6 +1587,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "NabeelAyubee",
+      "name": "Md Nabeel Ayubee",
+      "avatar_url": "https://avatars.githubusercontent.com/u/64087875?v=4",
+      "profile": "https://github.com/NabeelAyubee",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

README.md

@@ -299,6 +299,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/lluisrojass"><img src="https://avatars.githubusercontent.com/u/15043356?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Luis</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=lluisrojass" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/lharrison13"><img src="https://avatars.githubusercontent.com/u/172074450?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Luke Harrison</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=lharrison13" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/tekno0ryder"><img src="https://avatars.githubusercontent.com/u/8721803?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ahmed Alsinan</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=tekno0ryder" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/NabeelAyubee"><img src="https://avatars.githubusercontent.com/u/64087875?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Md Nabeel Ayubee</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=NabeelAyubee" title="Code">💻</a></td>
   </tr>
 </table>
 

packages/react/src/components/DatePicker/DatePicker.stories.js

@@ -61,6 +61,17 @@ export const SingleWithCalendar = () => (
   </DatePicker>
 );
 
+export const CalendarWithInline = () => (
+  <DatePicker datePickerType="single" inline={true}>
+    <DatePickerInput
+      placeholder="mm/dd/yyyy"
+      labelText="Date Picker label"
+      id="date-picker-single"
+      size="md"
+    />
+  </DatePicker>
+);
+
 export const RangeWithCalendar = () => {
   return (
     <DatePicker datePickerType="range">

packages/styles/scss/components/date-picker/_flatpickr.scss

@@ -145,9 +145,9 @@
   }
 
   .flatpickr-calendar.inline {
-    position: relative;
+    position: absolute;
     display: block;
-    inset-block-start: convert.to-rem(2px);
+    inset-block-start: auto;
   }
 
   .flatpickr-calendar.static {