diff --git a/src-docs/src/views/date_picker/range.tsx b/src-docs/src/views/date_picker/range.tsx
index 65a08a8a655..a9ecf02cbc6 100644
--- a/src-docs/src/views/date_picker/range.tsx
+++ b/src-docs/src/views/date_picker/range.tsx
@@ -10,7 +10,7 @@ export default () => {
 
   return (
     /* DisplayToggles wrapper for Docs only */
-    <DisplayToggles canCompressed={false} canLoading={false}>
+    <DisplayToggles canCompressed={false}>
       <EuiDatePickerRange
         isInvalid={startDate > endDate}
         startDateControl={
diff --git a/src-docs/src/views/form_controls/form_control_layout_range.tsx b/src-docs/src/views/form_controls/form_control_layout_range.tsx
index 9425c27c43e..ec15ef02c19 100644
--- a/src-docs/src/views/form_controls/form_control_layout_range.tsx
+++ b/src-docs/src/views/form_controls/form_control_layout_range.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import {
   EuiFormControlLayoutDelimited,
   EuiFormLabel,
+  EuiFieldNumber,
   EuiIcon,
 } from '../../../../src/components';
 
@@ -218,5 +219,49 @@ export default () => (
         />
       }
     />
+
+    <EuiFormControlLayoutDelimited
+      isDisabled
+      prepend={<EuiFormLabel>Disabled</EuiFormLabel>}
+      startControl={
+        <input
+          type="number"
+          placeholder="0"
+          className="euiFieldNumber"
+          disabled
+          aria-label="Use aria labels when no actual label is in use"
+        />
+      }
+      endControl={
+        <input
+          type="number"
+          placeholder="100"
+          className="euiFieldNumber"
+          disabled
+          aria-label="Use aria labels when no actual label is in use"
+        />
+      }
+    />
+
+    <EuiFormControlLayoutDelimited
+      isInvalid
+      prepend={<EuiFormLabel>Invalid</EuiFormLabel>}
+      startControl={
+        <EuiFieldNumber
+          isInvalid
+          controlOnly
+          placeholder="0"
+          aria-label="Use aria labels when no actual label is in use"
+        />
+      }
+      endControl={
+        <EuiFieldNumber
+          isInvalid
+          controlOnly
+          placeholder="100"
+          aria-label="Use aria labels when no actual label is in use"
+        />
+      }
+    />
   </div>
 );
diff --git a/src-docs/src/views/super_date_picker/playground.js b/src-docs/src/views/super_date_picker/playground.js
index fb35eb69d49..b593cdc7924 100644
--- a/src-docs/src/views/super_date_picker/playground.js
+++ b/src-docs/src/views/super_date_picker/playground.js
@@ -18,6 +18,20 @@ export const superDatePickerConfig = () => {
   propsToUse.onTimeChange = simulateFunction(propsToUse.onTimeChange, true);
   propsToUse.onRefreshChange = simulateFunction(propsToUse.onRefreshChange);
 
+  propsToUse.isPaused = {
+    ...propsToUse.isPaused,
+    type: PropTypes.Boolean,
+    defaultValue: true,
+    value: true,
+  };
+
+  propsToUse.showUpdateButton = {
+    ...propsToUse.showUpdateButton,
+    type: PropTypes.Boolean,
+    defaultValue: true,
+    value: true,
+  };
+
   propsToUse.locale = {
     ...propsToUse.locale,
     type: PropTypes.String,
diff --git a/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap b/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
index 537f051646d..b9d48084a46 100644
--- a/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
+++ b/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
@@ -13,16 +13,8 @@ exports[`renders EuiColorPicker 1`] = `
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
-        <input
-          aria-label="Press the down key to open a popover containing color options"
-          autocomplete="off"
-          class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
-          data-test-subj="euiColorPickerAnchor test subject string"
-          type="text"
-          value="#FFEEDD"
-        />
         <div
-          class="euiFormControlLayoutIcons"
+          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
         >
           <span
             class="euiFormControlLayoutCustomIcon"
@@ -35,8 +27,16 @@ exports[`renders EuiColorPicker 1`] = `
             />
           </span>
         </div>
+        <input
+          aria-label="Press the down key to open a popover containing color options"
+          autocomplete="off"
+          class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
+          data-test-subj="euiColorPickerAnchor test subject string"
+          type="text"
+          value="#FFEEDD"
+        />
         <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
         >
           <span
             class="euiFormControlLayoutCustomIcon"
@@ -67,16 +67,8 @@ exports[`renders EuiColorPicker with a clearable input 1`] = `
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
-        <input
-          aria-label="Press the down key to open a popover containing color options"
-          autocomplete="off"
-          class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
-          data-test-subj="euiColorPickerAnchor test subject string"
-          type="text"
-          value="#FFEEDD"
-        />
         <div
-          class="euiFormControlLayoutIcons"
+          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
         >
           <span
             class="euiFormControlLayoutCustomIcon"
@@ -89,8 +81,16 @@ exports[`renders EuiColorPicker with a clearable input 1`] = `
             />
           </span>
         </div>
+        <input
+          aria-label="Press the down key to open a popover containing color options"
+          autocomplete="off"
+          class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
+          data-test-subj="euiColorPickerAnchor test subject string"
+          type="text"
+          value="#FFEEDD"
+        />
         <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
         >
           <button
             aria-label="Clear input"
@@ -131,16 +131,8 @@ exports[`renders EuiColorPicker with a color swatch when color is defined 1`] =
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
-        <input
-          aria-label="Press the down key to open a popover containing color options"
-          autocomplete="off"
-          class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
-          data-test-subj="euiColorPickerAnchor test subject string"
-          type="text"
-          value="#FFFFFF"
-        />
         <div
-          class="euiFormControlLayoutIcons"
+          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
         >
           <span
             class="euiFormControlLayoutCustomIcon"
@@ -153,8 +145,16 @@ exports[`renders EuiColorPicker with a color swatch when color is defined 1`] =
             />
           </span>
         </div>
+        <input
+          aria-label="Press the down key to open a popover containing color options"
+          autocomplete="off"
+          class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
+          data-test-subj="euiColorPickerAnchor test subject string"
+          type="text"
+          value="#FFFFFF"
+        />
         <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
         >
           <span
             class="euiFormControlLayoutCustomIcon"
@@ -185,17 +185,8 @@ exports[`renders EuiColorPicker with a custom placeholder 1`] = `
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
-        <input
-          aria-label="Press the down key to open a popover containing color options"
-          autocomplete="off"
-          class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
-          data-test-subj="euiColorPickerAnchor test subject string"
-          placeholder="Auto"
-          type="text"
-          value=""
-        />
         <div
-          class="euiFormControlLayoutIcons"
+          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
         >
           <span
             class="euiFormControlLayoutCustomIcon"
@@ -208,8 +199,17 @@ exports[`renders EuiColorPicker with a custom placeholder 1`] = `
             />
           </span>
         </div>
+        <input
+          aria-label="Press the down key to open a popover containing color options"
+          autocomplete="off"
+          class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
+          data-test-subj="euiColorPickerAnchor test subject string"
+          placeholder="Auto"
+          type="text"
+          value=""
+        />
         <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
         >
           <span
             class="euiFormControlLayoutCustomIcon"
@@ -240,17 +240,8 @@ exports[`renders EuiColorPicker with an empty swatch when color is "" 1`] = `
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
-        <input
-          aria-label="Press the down key to open a popover containing color options"
-          autocomplete="off"
-          class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
-          data-test-subj="euiColorPickerAnchor test subject string"
-          placeholder="Transparent"
-          type="text"
-          value=""
-        />
         <div
-          class="euiFormControlLayoutIcons"
+          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
         >
           <span
             class="euiFormControlLayoutCustomIcon"
@@ -263,8 +254,17 @@ exports[`renders EuiColorPicker with an empty swatch when color is "" 1`] = `
             />
           </span>
         </div>
+        <input
+          aria-label="Press the down key to open a popover containing color options"
+          autocomplete="off"
+          class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
+          data-test-subj="euiColorPickerAnchor test subject string"
+          placeholder="Transparent"
+          type="text"
+          value=""
+        />
         <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
         >
           <span
             class="euiFormControlLayoutCustomIcon"
@@ -295,17 +295,8 @@ exports[`renders EuiColorPicker with an empty swatch when color is null 1`] = `
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
-        <input
-          aria-label="Press the down key to open a popover containing color options"
-          autocomplete="off"
-          class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
-          data-test-subj="euiColorPickerAnchor test subject string"
-          placeholder="Transparent"
-          type="text"
-          value=""
-        />
         <div
-          class="euiFormControlLayoutIcons"
+          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
         >
           <span
             class="euiFormControlLayoutCustomIcon"
@@ -318,8 +309,17 @@ exports[`renders EuiColorPicker with an empty swatch when color is null 1`] = `
             />
           </span>
         </div>
+        <input
+          aria-label="Press the down key to open a popover containing color options"
+          autocomplete="off"
+          class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
+          data-test-subj="euiColorPickerAnchor test subject string"
+          placeholder="Transparent"
+          type="text"
+          value=""
+        />
         <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
         >
           <span
             class="euiFormControlLayoutCustomIcon"
@@ -355,16 +355,8 @@ exports[`renders a EuiColorPicker with a prepend and append 1`] = `
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
-        <input
-          aria-label="Press the down key to open a popover containing color options"
-          autocomplete="off"
-          class="euiFieldText euiColorPicker__input euiColorPicker__input--inGroup euiFieldText--withIcon"
-          data-test-subj="euiColorPickerAnchor test subject string"
-          type="text"
-          value="#FFEEDD"
-        />
         <div
-          class="euiFormControlLayoutIcons"
+          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
         >
           <span
             class="euiFormControlLayoutCustomIcon"
@@ -377,8 +369,16 @@ exports[`renders a EuiColorPicker with a prepend and append 1`] = `
             />
           </span>
         </div>
+        <input
+          aria-label="Press the down key to open a popover containing color options"
+          autocomplete="off"
+          class="euiFieldText euiColorPicker__input euiColorPicker__input--inGroup euiFieldText--withIcon"
+          data-test-subj="euiColorPickerAnchor test subject string"
+          type="text"
+          value="#FFEEDD"
+        />
         <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
         >
           <span
             class="euiFormControlLayoutCustomIcon"
@@ -414,16 +414,8 @@ exports[`renders a EuiColorPicker with an alpha range selector 1`] = `
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
-        <input
-          aria-label="Press the down key to open a popover containing color options"
-          autocomplete="off"
-          class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
-          data-test-subj="euiColorPickerAnchor test subject string"
-          type="text"
-          value="#FFEEDD"
-        />
         <div
-          class="euiFormControlLayoutIcons"
+          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
         >
           <span
             class="euiFormControlLayoutCustomIcon"
@@ -436,8 +428,16 @@ exports[`renders a EuiColorPicker with an alpha range selector 1`] = `
             />
           </span>
         </div>
+        <input
+          aria-label="Press the down key to open a popover containing color options"
+          autocomplete="off"
+          class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
+          data-test-subj="euiColorPickerAnchor test subject string"
+          type="text"
+          value="#FFEEDD"
+        />
         <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
         >
           <span
             class="euiFormControlLayoutCustomIcon"
@@ -468,16 +468,8 @@ exports[`renders compressed EuiColorPicker 1`] = `
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
-        <input
-          aria-label="Press the down key to open a popover containing color options"
-          autocomplete="off"
-          class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFieldText--compressed"
-          data-test-subj="euiColorPickerAnchor test subject string"
-          type="text"
-          value="#FFEEDD"
-        />
         <div
-          class="euiFormControlLayoutIcons"
+          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
         >
           <span
             class="euiFormControlLayoutCustomIcon"
@@ -490,8 +482,16 @@ exports[`renders compressed EuiColorPicker 1`] = `
             />
           </span>
         </div>
+        <input
+          aria-label="Press the down key to open a popover containing color options"
+          autocomplete="off"
+          class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFieldText--compressed"
+          data-test-subj="euiColorPickerAnchor test subject string"
+          type="text"
+          value="#FFEEDD"
+        />
         <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
         >
           <span
             class="euiFormControlLayoutCustomIcon"
@@ -522,17 +522,8 @@ exports[`renders disabled EuiColorPicker 1`] = `
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
-        <input
-          aria-label="Press the down key to open a popover containing color options"
-          autocomplete="off"
-          class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
-          data-test-subj="euiColorPickerAnchor test subject string"
-          disabled=""
-          type="text"
-          value="#FFEEDD"
-        />
         <div
-          class="euiFormControlLayoutIcons"
+          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
         >
           <span
             class="euiFormControlLayoutCustomIcon"
@@ -545,6 +536,15 @@ exports[`renders disabled EuiColorPicker 1`] = `
             />
           </span>
         </div>
+        <input
+          aria-label="Press the down key to open a popover containing color options"
+          autocomplete="off"
+          class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
+          data-test-subj="euiColorPickerAnchor test subject string"
+          disabled=""
+          type="text"
+          value="#FFEEDD"
+        />
       </div>
     </div>
   </div>
@@ -564,16 +564,8 @@ exports[`renders fullWidth EuiColorPicker 1`] = `
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
-        <input
-          aria-label="Press the down key to open a popover containing color options"
-          autocomplete="off"
-          class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFieldText--fullWidth"
-          data-test-subj="euiColorPickerAnchor test subject string"
-          type="text"
-          value="#FFEEDD"
-        />
         <div
-          class="euiFormControlLayoutIcons"
+          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
         >
           <span
             class="euiFormControlLayoutCustomIcon"
@@ -586,8 +578,16 @@ exports[`renders fullWidth EuiColorPicker 1`] = `
             />
           </span>
         </div>
+        <input
+          aria-label="Press the down key to open a popover containing color options"
+          autocomplete="off"
+          class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFieldText--fullWidth"
+          data-test-subj="euiColorPickerAnchor test subject string"
+          type="text"
+          value="#FFEEDD"
+        />
         <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
         >
           <span
             class="euiFormControlLayoutCustomIcon"
@@ -790,17 +790,8 @@ exports[`renders readOnly EuiColorPicker 1`] = `
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
-        <input
-          aria-label="Press the down key to open a popover containing color options"
-          autocomplete="off"
-          class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
-          data-test-subj="euiColorPickerAnchor test subject string"
-          readonly=""
-          type="text"
-          value="#FFEEDD"
-        />
         <div
-          class="euiFormControlLayoutIcons"
+          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
         >
           <span
             class="euiFormControlLayoutCustomIcon"
@@ -813,6 +804,15 @@ exports[`renders readOnly EuiColorPicker 1`] = `
             />
           </span>
         </div>
+        <input
+          aria-label="Press the down key to open a popover containing color options"
+          autocomplete="off"
+          class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
+          data-test-subj="euiColorPickerAnchor test subject string"
+          readonly=""
+          type="text"
+          value="#FFEEDD"
+        />
       </div>
     </div>
   </div>
diff --git a/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap b/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
index 72858bcf8d2..67a35320f4a 100644
--- a/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
+++ b/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`EuiColorPalettePicker is rendered 1`] = `
             type="button"
           />
           <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
           >
             <span
               class="euiFormControlLayoutCustomIcon"
@@ -73,7 +73,7 @@ exports[`EuiColorPalettePicker is rendered with a selected custom text 1`] = `
             Plain text as a custom option
           </button>
           <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
           >
             <span
               class="euiFormControlLayoutCustomIcon"
@@ -148,7 +148,7 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = `
             </span>
           </button>
           <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
           >
             <span
               class="euiFormControlLayoutCustomIcon"
@@ -204,7 +204,7 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`]
             />
           </button>
           <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
           >
             <span
               class="euiFormControlLayoutCustomIcon"
@@ -260,7 +260,7 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette with
             />
           </button>
           <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
           >
             <span
               class="euiFormControlLayoutCustomIcon"
@@ -307,7 +307,7 @@ exports[`EuiColorPalettePicker is rendered with the prop selectionDisplay set as
             Palette 1
           </button>
           <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
           >
             <span
               class="euiFormControlLayoutCustomIcon"
@@ -381,7 +381,7 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
             </span>
           </button>
           <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
           >
             <span
               class="euiFormControlLayoutCustomIcon"
diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
index 21a25cf3fa6..b49297c48c0 100644
--- a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
+++ b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
@@ -38,7 +38,7 @@ exports[`EuiComboBox is rendered 1`] = `
         </div>
       </div>
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
       >
         <button
           aria-label="Open list of options"
@@ -450,7 +450,7 @@ exports[`props options list is rendered 1`] = `
         </div>
       </div>
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
       >
         <button
           aria-label="Close list of options"
diff --git a/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap b/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
index 85b96b58fb2..a09129ee578 100644
--- a/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
+++ b/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
@@ -884,6 +884,37 @@ exports[`EuiDatePicker popoverPlacement upRight is rendered 1`] = `
         <div
           className="euiFormControlLayout__childrenWrapper"
         >
+          <EuiFormControlLayoutIcons
+            icon="calendar"
+            side="left"
+          >
+            <div
+              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+            >
+              <EuiFormControlLayoutCustomIcon
+                size="m"
+                type="calendar"
+              >
+                <span
+                  className="euiFormControlLayoutCustomIcon"
+                >
+                  <EuiIcon
+                    aria-hidden="true"
+                    className="euiFormControlLayoutCustomIcon__icon"
+                    size="m"
+                    type="calendar"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="euiFormControlLayoutCustomIcon__icon"
+                      data-euiicon-type="calendar"
+                      size="m"
+                    />
+                  </EuiIcon>
+                </span>
+              </EuiFormControlLayoutCustomIcon>
+            </div>
+          </EuiFormControlLayoutIcons>
           <DatePicker
             accessibleMode={true}
             adjustDateOnChange={true}
@@ -1137,36 +1168,6 @@ exports[`EuiDatePicker popoverPlacement upRight is rendered 1`] = `
               </EuiOutsideClickDetector>
             </EuiPopover>
           </DatePicker>
-          <EuiFormControlLayoutIcons
-            icon="calendar"
-          >
-            <div
-              className="euiFormControlLayoutIcons"
-            >
-              <EuiFormControlLayoutCustomIcon
-                size="m"
-                type="calendar"
-              >
-                <span
-                  className="euiFormControlLayoutCustomIcon"
-                >
-                  <EuiIcon
-                    aria-hidden="true"
-                    className="euiFormControlLayoutCustomIcon__icon"
-                    size="m"
-                    type="calendar"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="euiFormControlLayoutCustomIcon__icon"
-                      data-euiicon-type="calendar"
-                      size="m"
-                    />
-                  </EuiIcon>
-                </span>
-              </EuiFormControlLayoutCustomIcon>
-            </div>
-          </EuiFormControlLayoutIcons>
         </div>
       </div>
     </EuiFormControlLayout>
diff --git a/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap b/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap
index 8fbf882c855..9ba7ffb0fd8 100644
--- a/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap
+++ b/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap
@@ -2,464 +2,361 @@
 
 exports[`EuiDatePickerRange disabled is rendered 1`] = `
 <div
-  class="euiDatePickerRange euiDatePickerRange--isDisabled"
+  class="euiFormControlLayout euiFormControlLayout-isDisabled euiFormControlLayoutDelimited euiDatePickerRange euiDatePickerRange--isDisabled"
 >
-  <span
-    class="euiDatePicker euiDatePicker--shadow"
+  <div
+    class="euiFormControlLayout__childrenWrapper"
   >
     <div
-      class="euiFormControlLayout"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--static"
+    >
+      <span
+        class="euiFormControlLayoutCustomIcon"
+      >
+        <span
+          aria-hidden="true"
+          class="euiFormControlLayoutCustomIcon__icon"
+          data-euiicon-type="calendar"
+        />
+      </span>
+    </div>
+    <div
+      class="euiPopover emotion-euiPopover"
     >
       <div
-        class="euiFormControlLayout__childrenWrapper"
+        class="euiPopover__anchor css-zih94u-render"
       >
         <div
-          class="euiPopover emotion-euiPopover"
+          class="react-datepicker__input-container"
         >
-          <div
-            class="euiPopover__anchor css-zih94u-render"
-          >
-            <div
-              class="react-datepicker__input-container"
-            >
-              <input
-                aria-label="Press the down key to open a popover containing a calendar."
-                class="euiDatePicker euiFieldText euiFieldText--withIcon euiDatePickerRange__start"
-                disabled=""
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="euiFormControlLayoutIcons"
-        >
-          <span
-            class="euiFormControlLayoutCustomIcon"
-          >
-            <span
-              aria-hidden="true"
-              class="euiFormControlLayoutCustomIcon__icon"
-              data-euiicon-type="calendar"
-            />
-          </span>
+          <input
+            aria-label="Press the down key to open a popover containing a calendar."
+            class="euiDatePicker euiFieldText euiDatePickerRange__start euiFormControlLayoutDelimited__input"
+            disabled=""
+            type="text"
+            value=""
+          />
         </div>
       </div>
     </div>
-  </span>
-  <span
-    class="euiDatePickerRange__delimeter"
-  >
-    <span
-      color="subdued"
-      data-euiicon-type="sortRight"
-    />
-  </span>
-  <span
-    class="euiDatePicker euiDatePicker--shadow"
-  >
     <div
-      class="euiFormControlLayout"
+      class="euiText euiFormControlLayoutDelimited__delimiter emotion-euiText-s-euiTextColor-subdued"
+    >
+      <span
+        data-euiicon-type="sortRight"
+      >
+        to
+      </span>
+    </div>
+    <div
+      class="euiPopover emotion-euiPopover"
     >
       <div
-        class="euiFormControlLayout__childrenWrapper"
+        class="euiPopover__anchor css-zih94u-render"
       >
         <div
-          class="euiPopover emotion-euiPopover"
+          class="react-datepicker__input-container"
         >
-          <div
-            class="euiPopover__anchor css-zih94u-render"
-          >
-            <div
-              class="react-datepicker__input-container"
-            >
-              <input
-                aria-label="Press the down key to open a popover containing a calendar."
-                class="euiDatePicker euiFieldText euiDatePickerRange__end"
-                disabled=""
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
+          <input
+            aria-label="Press the down key to open a popover containing a calendar."
+            class="euiDatePicker euiFieldText euiDatePickerRange__end euiFormControlLayoutDelimited__input"
+            disabled=""
+            type="text"
+            value=""
+          />
         </div>
       </div>
     </div>
-  </span>
+  </div>
 </div>
 `;
 
 exports[`EuiDatePickerRange is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiDatePickerRange testClass1 testClass2"
+  class="euiFormControlLayout euiFormControlLayoutDelimited euiDatePickerRange testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  <span
-    class="euiDatePicker euiDatePicker--shadow"
+  <div
+    class="euiFormControlLayout__childrenWrapper"
   >
     <div
-      class="euiFormControlLayout"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--static"
+    >
+      <span
+        class="euiFormControlLayoutCustomIcon"
+      >
+        <span
+          aria-hidden="true"
+          class="euiFormControlLayoutCustomIcon__icon"
+          data-euiicon-type="calendar"
+        />
+      </span>
+    </div>
+    <div
+      class="euiPopover emotion-euiPopover"
     >
       <div
-        class="euiFormControlLayout__childrenWrapper"
+        class="euiPopover__anchor css-zih94u-render"
       >
         <div
-          class="euiPopover emotion-euiPopover"
+          class="react-datepicker__input-container"
         >
-          <div
-            class="euiPopover__anchor css-zih94u-render"
-          >
-            <div
-              class="react-datepicker__input-container"
-            >
-              <input
-                aria-label="Press the down key to open a popover containing a calendar."
-                class="euiDatePicker euiFieldText euiFieldText--withIcon euiDatePickerRange__start"
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="euiFormControlLayoutIcons"
-        >
-          <span
-            class="euiFormControlLayoutCustomIcon"
-          >
-            <span
-              aria-hidden="true"
-              class="euiFormControlLayoutCustomIcon__icon"
-              data-euiicon-type="calendar"
-            />
-          </span>
+          <input
+            aria-label="Press the down key to open a popover containing a calendar."
+            class="euiDatePicker euiFieldText euiDatePickerRange__start euiFormControlLayoutDelimited__input"
+            type="text"
+            value=""
+          />
         </div>
       </div>
     </div>
-  </span>
-  <span
-    class="euiDatePickerRange__delimeter"
-  >
-    <span
-      color="subdued"
-      data-euiicon-type="sortRight"
-    />
-  </span>
-  <span
-    class="euiDatePicker euiDatePicker--shadow"
-  >
     <div
-      class="euiFormControlLayout"
+      class="euiText euiFormControlLayoutDelimited__delimiter emotion-euiText-s-euiTextColor-subdued"
+    >
+      <span
+        data-euiicon-type="sortRight"
+      >
+        to
+      </span>
+    </div>
+    <div
+      class="euiPopover emotion-euiPopover"
     >
       <div
-        class="euiFormControlLayout__childrenWrapper"
+        class="euiPopover__anchor css-zih94u-render"
       >
         <div
-          class="euiPopover emotion-euiPopover"
+          class="react-datepicker__input-container"
         >
-          <div
-            class="euiPopover__anchor css-zih94u-render"
-          >
-            <div
-              class="react-datepicker__input-container"
-            >
-              <input
-                aria-label="Press the down key to open a popover containing a calendar."
-                class="euiDatePicker euiFieldText euiDatePickerRange__end"
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
+          <input
+            aria-label="Press the down key to open a popover containing a calendar."
+            class="euiDatePicker euiFieldText euiDatePickerRange__end euiFormControlLayoutDelimited__input"
+            type="text"
+            value=""
+          />
         </div>
       </div>
     </div>
-  </span>
+  </div>
 </div>
 `;
 
 exports[`EuiDatePickerRange isInvalid is rendered 1`] = `
 <div
-  class="euiDatePickerRange euiDatePickerRange--isInvalid"
+  class="euiFormControlLayout euiFormControlLayoutDelimited euiDatePickerRange euiDatePickerRange--isInvalid euiFormControlLayoutDelimited--isInvalid"
 >
-  <span
-    class="euiDatePicker euiDatePicker--shadow"
+  <div
+    class="euiFormControlLayout__childrenWrapper"
   >
     <div
-      class="euiFormControlLayout"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--static"
+    >
+      <span
+        class="euiFormControlLayoutCustomIcon"
+      >
+        <span
+          aria-hidden="true"
+          class="euiFormControlLayoutCustomIcon__icon"
+          data-euiicon-type="calendar"
+        />
+      </span>
+    </div>
+    <div
+      class="euiPopover emotion-euiPopover"
     >
       <div
-        class="euiFormControlLayout__childrenWrapper"
+        class="euiPopover__anchor css-zih94u-render"
       >
         <div
-          class="euiPopover emotion-euiPopover"
-        >
-          <div
-            class="euiPopover__anchor css-zih94u-render"
-          >
-            <div
-              class="react-datepicker__input-container"
-            >
-              <input
-                aria-label="Press the down key to open a popover containing a calendar."
-                class="euiDatePicker euiFieldText euiFormControlLayout--1icons euiFieldText--withIcon euiDatePickerRange__start"
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="euiFormControlLayoutIcons"
+          class="react-datepicker__input-container"
         >
-          <span
-            class="euiFormControlLayoutCustomIcon"
-          >
-            <span
-              aria-hidden="true"
-              class="euiFormControlLayoutCustomIcon__icon"
-              data-euiicon-type="calendar"
-            />
-          </span>
-        </div>
-        <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-        >
-          <span
-            color="danger"
-            data-euiicon-type="warning"
+          <input
+            aria-label="Press the down key to open a popover containing a calendar."
+            class="euiDatePicker euiFieldText euiDatePickerRange__start euiFormControlLayoutDelimited__input"
+            type="text"
+            value=""
           />
         </div>
       </div>
     </div>
-  </span>
-  <span
-    class="euiDatePickerRange__delimeter"
-  >
-    <span
-      color="danger"
-      data-euiicon-type="sortRight"
-    />
-  </span>
-  <span
-    class="euiDatePicker euiDatePicker--shadow"
-  >
     <div
-      class="euiFormControlLayout"
+      class="euiText euiFormControlLayoutDelimited__delimiter emotion-euiText-s-euiTextColor-danger"
+    >
+      <span
+        data-euiicon-type="sortRight"
+      >
+        to
+      </span>
+    </div>
+    <div
+      class="euiPopover emotion-euiPopover"
     >
       <div
-        class="euiFormControlLayout__childrenWrapper"
+        class="euiPopover__anchor css-zih94u-render"
       >
         <div
-          class="euiPopover emotion-euiPopover"
+          class="react-datepicker__input-container"
         >
-          <div
-            class="euiPopover__anchor css-zih94u-render"
-          >
-            <div
-              class="react-datepicker__input-container"
-            >
-              <input
-                aria-label="Press the down key to open a popover containing a calendar."
-                class="euiDatePicker euiFieldText euiFormControlLayout--1icons euiDatePickerRange__end"
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-        >
-          <span
-            color="danger"
-            data-euiicon-type="warning"
+          <input
+            aria-label="Press the down key to open a popover containing a calendar."
+            class="euiDatePicker euiFieldText euiDatePickerRange__end euiFormControlLayoutDelimited__input"
+            type="text"
+            value=""
           />
         </div>
       </div>
     </div>
-  </span>
+    <div
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--static"
+    >
+      <span
+        color="danger"
+        data-euiicon-type="warning"
+      />
+    </div>
+  </div>
 </div>
 `;
 
 exports[`EuiDatePickerRange readOnly is rendered 1`] = `
 <div
-  class="euiDatePickerRange euiDatePickerRange--readOnly"
+  class="euiFormControlLayout euiFormControlLayout--readOnly euiFormControlLayoutDelimited euiDatePickerRange euiDatePickerRange--readOnly"
 >
-  <span
-    class="euiDatePicker euiDatePicker--shadow"
+  <div
+    class="euiFormControlLayout__childrenWrapper"
   >
     <div
-      class="euiFormControlLayout"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--static"
+    >
+      <span
+        class="euiFormControlLayoutCustomIcon"
+      >
+        <span
+          aria-hidden="true"
+          class="euiFormControlLayoutCustomIcon__icon"
+          data-euiicon-type="calendar"
+        />
+      </span>
+    </div>
+    <div
+      class="euiPopover emotion-euiPopover"
     >
       <div
-        class="euiFormControlLayout__childrenWrapper"
+        class="euiPopover__anchor css-zih94u-render"
       >
         <div
-          class="euiPopover emotion-euiPopover"
-        >
-          <div
-            class="euiPopover__anchor css-zih94u-render"
-          >
-            <div
-              class="react-datepicker__input-container"
-            >
-              <input
-                aria-label="Press the down key to open a popover containing a calendar."
-                class="euiDatePicker euiFieldText euiFieldText--withIcon euiDatePickerRange__start"
-                readonly=""
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="euiFormControlLayoutIcons"
+          class="react-datepicker__input-container"
         >
-          <span
-            class="euiFormControlLayoutCustomIcon"
-          >
-            <span
-              aria-hidden="true"
-              class="euiFormControlLayoutCustomIcon__icon"
-              data-euiicon-type="calendar"
-            />
-          </span>
+          <input
+            aria-label="Press the down key to open a popover containing a calendar."
+            class="euiDatePicker euiFieldText euiDatePickerRange__start euiFormControlLayoutDelimited__input"
+            readonly=""
+            type="text"
+            value=""
+          />
         </div>
       </div>
     </div>
-  </span>
-  <span
-    class="euiDatePickerRange__delimeter"
-  >
-    <span
-      color="subdued"
-      data-euiicon-type="sortRight"
-    />
-  </span>
-  <span
-    class="euiDatePicker euiDatePicker--shadow"
-  >
     <div
-      class="euiFormControlLayout"
+      class="euiText euiFormControlLayoutDelimited__delimiter emotion-euiText-s-euiTextColor-subdued"
+    >
+      <span
+        data-euiicon-type="sortRight"
+      >
+        to
+      </span>
+    </div>
+    <div
+      class="euiPopover emotion-euiPopover"
     >
       <div
-        class="euiFormControlLayout__childrenWrapper"
+        class="euiPopover__anchor css-zih94u-render"
       >
         <div
-          class="euiPopover emotion-euiPopover"
+          class="react-datepicker__input-container"
         >
-          <div
-            class="euiPopover__anchor css-zih94u-render"
-          >
-            <div
-              class="react-datepicker__input-container"
-            >
-              <input
-                aria-label="Press the down key to open a popover containing a calendar."
-                class="euiDatePicker euiFieldText euiDatePickerRange__end"
-                readonly=""
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
+          <input
+            aria-label="Press the down key to open a popover containing a calendar."
+            class="euiDatePicker euiFieldText euiDatePickerRange__end euiFormControlLayoutDelimited__input"
+            readonly=""
+            type="text"
+            value=""
+          />
         </div>
       </div>
     </div>
-  </span>
+  </div>
 </div>
 `;
 
 exports[`EuiDatePickerRange uses individual EuiDatePicker props 1`] = `
 <div
   aria-label="aria-label"
-  class="euiDatePickerRange testClass1 testClass2"
+  class="euiFormControlLayout euiFormControlLayoutDelimited euiDatePickerRange testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  <span
-    class="euiDatePicker euiDatePicker--shadow"
+  <div
+    class="euiFormControlLayout__childrenWrapper"
   >
     <div
-      class="euiFormControlLayout"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--static"
+    >
+      <span
+        class="euiFormControlLayoutCustomIcon"
+      >
+        <span
+          aria-hidden="true"
+          class="euiFormControlLayoutCustomIcon__icon"
+          data-euiicon-type="calendar"
+        />
+      </span>
+    </div>
+    <div
+      class="euiPopover emotion-euiPopover"
     >
       <div
-        class="euiFormControlLayout__childrenWrapper"
+        class="euiPopover__anchor css-zih94u-render"
       >
         <div
-          class="euiPopover emotion-euiPopover"
-        >
-          <div
-            class="euiPopover__anchor css-zih94u-render"
-          >
-            <div
-              class="react-datepicker__input-container"
-            >
-              <input
-                aria-label="Press the down key to open a popover containing a calendar."
-                class="euiDatePicker euiFieldText euiFieldText--withIcon euiDatePickerRange__start hello"
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="euiFormControlLayoutIcons"
+          class="react-datepicker__input-container"
         >
-          <span
-            class="euiFormControlLayoutCustomIcon"
-          >
-            <span
-              aria-hidden="true"
-              class="euiFormControlLayoutCustomIcon__icon"
-              data-euiicon-type="calendar"
-            />
-          </span>
+          <input
+            aria-label="Press the down key to open a popover containing a calendar."
+            class="euiDatePicker euiFieldText euiDatePickerRange__start hello euiFormControlLayoutDelimited__input"
+            type="text"
+            value=""
+          />
         </div>
       </div>
     </div>
-  </span>
-  <span
-    class="euiDatePickerRange__delimeter"
-  >
-    <span
-      color="subdued"
-      data-euiicon-type="sortRight"
-    />
-  </span>
-  <span
-    class="euiDatePicker euiDatePicker--shadow"
-  >
     <div
-      class="euiFormControlLayout"
+      class="euiText euiFormControlLayoutDelimited__delimiter emotion-euiText-s-euiTextColor-subdued"
+    >
+      <span
+        data-euiicon-type="sortRight"
+      >
+        to
+      </span>
+    </div>
+    <div
+      class="euiPopover emotion-euiPopover"
     >
       <div
-        class="euiFormControlLayout__childrenWrapper"
+        class="euiPopover__anchor css-zih94u-render"
       >
         <div
-          class="euiPopover emotion-euiPopover"
+          class="react-datepicker__input-container"
         >
-          <div
-            class="euiPopover__anchor css-zih94u-render"
-          >
-            <div
-              class="react-datepicker__input-container"
-            >
-              <input
-                aria-label="Press the down key to open a popover containing a calendar."
-                class="euiDatePicker euiFieldText euiDatePickerRange__end world"
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
+          <input
+            aria-label="Press the down key to open a popover containing a calendar."
+            class="euiDatePicker euiFieldText euiDatePickerRange__end world euiFormControlLayoutDelimited__input"
+            type="text"
+            value=""
+          />
         </div>
       </div>
     </div>
-  </span>
+  </div>
 </div>
 `;
diff --git a/src/components/date_picker/_date_picker_range.scss b/src/components/date_picker/_date_picker_range.scss
index a70bb73f80b..5ef1251be83 100644
--- a/src/components/date_picker/_date_picker_range.scss
+++ b/src/components/date_picker/_date_picker_range.scss
@@ -1,65 +1,5 @@
-/**
- * 1. Account for inner box-shadow style border
- */
-
 .euiDatePickerRange {
-  @include euiFormControlSize(auto, $includeAlternates: true);
-  // Match just the regular drop shadow of inputs
-  @include euiFormControlDefaultShadow;
-  display: flex;
-  align-items: center;
-  padding: 1px; /* 1 */
-
-  // Allow any child to fill entire range container
-  > * {
-    flex-grow: 1;
-  }
-
   .euiFieldText.euiDatePicker {
     height: $euiFormControlLayoutGroupInputHeight;
-    // including all states
-    box-shadow: none !important; // stylelint-disable-line declaration-no-important
-    text-align: center;
-  }
-
-  .euiDatePickerRange__start {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  .euiDatePickerRange__end {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  .react-datepicker-popper .euiFieldText.euiDatePicker {
-    // set any subsequent children in popper back to left align
-    text-align: left;
-  }
-
-  // Necessary for EuiSuperDatePicker
-  &--inGroup {
-    box-shadow: none;
-    padding: 0;
   }
 }
-
-.euiDatePickerRange--isDisabled {
-  background: $euiFormBackgroundDisabledColor;
-}
-
-.euiDatePickerRange--readOnly {
-  background: $euiFormBackgroundReadOnlyColor;
-}
-
-.euiDatePickerRange__delimeter {
-  align-self: stretch;
-  height: auto;
-  flex-grow: 0;
-  display: flex;
-  align-items: center;
-}
-
-.euiDatePickerRange--isInvalid:not(.euiDatePickerRange--isDisabled):not(.euiDatePickerRange--readOnly) .euiDatePickerRange__delimeter {
-  @include euiFormControlInvalidStyle;
-}
diff --git a/src/components/date_picker/date_picker.tsx b/src/components/date_picker/date_picker.tsx
index 05e4db05844..a82cb76af81 100644
--- a/src/components/date_picker/date_picker.tsx
+++ b/src/components/date_picker/date_picker.tsx
@@ -126,6 +126,12 @@ interface EuiExtendedDatePickerProps
    * **Use [EuiPopover](/#/layout/popover) values**: 'upCenter', 'upLeft', 'upRight', downCenter', 'downLeft', 'downRight', 'leftCenter', 'leftUp', 'leftDown', 'rightCenter', 'rightUp', 'rightDown'.
    */
   popoverPlacement?: PopoverAnchorPosition;
+
+  /**
+   * Completely removes form control layout wrapper and ignores
+   * iconType. Best used inside EuiFormControlLayoutDelimited.
+   */
+  controlOnly?: boolean;
 }
 
 export type EuiDatePickerProps = CommonProps & EuiExtendedDatePickerProps;
@@ -134,6 +140,7 @@ export const EuiDatePicker: FunctionComponent<EuiDatePickerProps> = ({
   adjustDateOnChange = true,
   calendarClassName,
   className,
+  controlOnly,
   customInput,
   dateFormat = euiDatePickerDefaultDateFormat,
   dayClassName,
@@ -173,10 +180,12 @@ export const EuiDatePicker: FunctionComponent<EuiDatePickerProps> = ({
     'euiDatePicker--inline': inline,
   });
 
-  const numIconsClass = getFormControlClassNameForIconCount({
-    isInvalid,
-    isLoading,
-  });
+  const numIconsClass = controlOnly
+    ? false
+    : getFormControlClassNameForIconCount({
+        isInvalid,
+        isLoading,
+      });
 
   const datePickerClasses = classNames(
     'euiDatePicker',
@@ -217,6 +226,52 @@ export const EuiDatePicker: FunctionComponent<EuiDatePickerProps> = ({
   useEuiValidatableControl({ isInvalid, controlEl: inputValidityRef });
   const inputRefs = useCombinedRefs([inputRef, setInputValidityRef]);
 
+  const control = (
+    <EuiI18nConsumer>
+      {({ locale: contextLocale }) => {
+        return (
+          <ReactDatePicker
+            adjustDateOnChange={adjustDateOnChange}
+            calendarClassName={calendarClassName}
+            className={datePickerClasses}
+            customInput={customInput}
+            dateFormat={fullDateFormat}
+            dayClassName={dayClassName}
+            disabled={disabled}
+            excludeDates={excludeDates}
+            filterDate={filterDate}
+            injectTimes={injectTimes}
+            inline={inline}
+            locale={locale || contextLocale}
+            maxDate={maxDate}
+            maxTime={maxTime}
+            minDate={minDate}
+            minTime={minTime}
+            onChange={onChange}
+            openToDate={openToDate}
+            placeholderText={placeholder}
+            popperClassName={popperClassName}
+            ref={inputRefs}
+            selected={selected}
+            shouldCloseOnSelect={shouldCloseOnSelect}
+            showMonthDropdown
+            showTimeSelect={showTimeSelectOnly ? true : showTimeSelect}
+            showTimeSelectOnly={showTimeSelectOnly}
+            showYearDropdown
+            timeFormat={timeFormat}
+            utcOffset={utcOffset}
+            yearDropdownItemNumber={7}
+            accessibleMode
+            popperPlacement={popoverPlacement}
+            {...rest}
+          />
+        );
+      }}
+    </EuiI18nConsumer>
+  );
+
+  if (controlOnly) return control;
+
   return (
     <span className={classes}>
       <EuiFormControlLayout
@@ -226,47 +281,7 @@ export const EuiDatePicker: FunctionComponent<EuiDatePickerProps> = ({
         isLoading={isLoading}
         isInvalid={isInvalid}
       >
-        <EuiI18nConsumer>
-          {({ locale: contextLocale }) => {
-            return (
-              <ReactDatePicker
-                adjustDateOnChange={adjustDateOnChange}
-                calendarClassName={calendarClassName}
-                className={datePickerClasses}
-                customInput={customInput}
-                dateFormat={fullDateFormat}
-                dayClassName={dayClassName}
-                disabled={disabled}
-                excludeDates={excludeDates}
-                filterDate={filterDate}
-                injectTimes={injectTimes}
-                inline={inline}
-                locale={locale || contextLocale}
-                maxDate={maxDate}
-                maxTime={maxTime}
-                minDate={minDate}
-                minTime={minTime}
-                onChange={onChange}
-                openToDate={openToDate}
-                placeholderText={placeholder}
-                popperClassName={popperClassName}
-                ref={inputRefs}
-                selected={selected}
-                shouldCloseOnSelect={shouldCloseOnSelect}
-                showMonthDropdown
-                showTimeSelect={showTimeSelectOnly ? true : showTimeSelect}
-                showTimeSelectOnly={showTimeSelectOnly}
-                showYearDropdown
-                timeFormat={timeFormat}
-                utcOffset={utcOffset}
-                yearDropdownItemNumber={7}
-                accessibleMode
-                popperPlacement={popoverPlacement}
-                {...rest}
-              />
-            );
-          }}
-        </EuiI18nConsumer>
+        {control}
       </EuiFormControlLayout>
     </span>
   );
diff --git a/src/components/date_picker/date_picker_range.tsx b/src/components/date_picker/date_picker_range.tsx
index 7c48bf777b8..1b5cc77c05a 100644
--- a/src/components/date_picker/date_picker_range.tsx
+++ b/src/components/date_picker/date_picker_range.tsx
@@ -9,7 +9,6 @@
 import React, {
   FocusEvent,
   FocusEventHandler,
-  Fragment,
   FunctionComponent,
   ReactNode,
   cloneElement,
@@ -17,66 +16,59 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-import { IconType, EuiIcon } from '../icon';
+import {
+  EuiFormControlLayoutDelimited,
+  EuiFormControlLayoutDelimitedProps,
+} from '../form';
+import { IconType } from '../icon';
 import { CommonProps } from '../common';
 import { EuiDatePickerProps } from './date_picker';
 
-export type EuiDatePickerRangeProps = CommonProps & {
-  /**
-   * Including any children will replace all innards with the provided children
-   */
-  children?: ReactNode;
-
-  /**
-   * The end date `EuiDatePicker` element
-   */
-  endDateControl: ReactElement;
-
-  /**
-   * The start date `EuiDatePicker` element
-   */
-  startDateControl: ReactElement;
-
-  /**
-   * Pass either an icon type or set to `false` to remove icon entirely
-   */
-  iconType?: boolean | IconType;
-
-  /**
-   * Won't apply any additional props to start and end date components
-   */
-  isCustom?: boolean;
-
-  /**
-   * Will color the range delimiter the `danger` color and pass through to each control
-   */
-  isInvalid?: boolean;
-
-  /**
-   * Passes through to each control
-   */
-  disabled?: boolean;
-
-  /**
-   * Passes through to each control
-   */
-  readOnly?: boolean;
-
-  /**
-   * Passes through to each control
-   */
-  fullWidth?: boolean;
-
-  /**
-   * Triggered whenever the start or end controls are blurred
-   */
-  onBlur?: FocusEventHandler<HTMLInputElement>;
-
-  /**
-   * Triggered whenever the start or end controls are focused
-   */
-  onFocus?: FocusEventHandler<HTMLInputElement>;
-};
+export type EuiDatePickerRangeProps = CommonProps &
+  Pick<
+    EuiFormControlLayoutDelimitedProps,
+    'isInvalid' | 'readOnly' | 'fullWidth' | 'prepend' | 'append'
+  > & {
+    /**
+     * Including any children will replace all innards with the provided children
+     */
+    children?: ReactNode;
+
+    /**
+     * The end date `EuiDatePicker` element
+     */
+    endDateControl: ReactElement;
+
+    /**
+     * The start date `EuiDatePicker` element
+     */
+    startDateControl: ReactElement;
+
+    /**
+     * Pass either an icon type or set to `false` to remove icon entirely
+     */
+    iconType?: boolean | IconType;
+
+    /**
+     * Won't apply any additional props to start and end date components
+     */
+    isCustom?: boolean;
+
+    /**
+     * Passes through to each control
+     */
+    disabled?: boolean;
+
+    /**
+     * Triggered whenever the start or end controls are blurred
+     */
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+
+    /**
+     * Triggered whenever the start or end controls are focused
+     */
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+  };
 
 export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
   children,
@@ -91,6 +83,8 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
   disabled,
   onFocus,
   onBlur,
+  append,
+  prepend,
   ...rest
 }) => {
   const classes = classNames(
@@ -111,8 +105,8 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
     startControl = cloneElement(
       startDateControl as ReactElement<EuiDatePickerProps>,
       {
-        iconType: typeof iconType === 'boolean' ? undefined : iconType,
-        showIcon: !!iconType,
+        controlOnly: true,
+        showIcon: false,
         fullWidth: fullWidth,
         readOnly: readOnly,
         disabled: disabled || startDateControl.props.disabled,
@@ -135,6 +129,7 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
     endControl = cloneElement(
       endDateControl as ReactElement<EuiDatePickerProps>,
       {
+        controlOnly: true,
         showIcon: false,
         fullWidth: fullWidth,
         readOnly: readOnly,
@@ -157,23 +152,19 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
     );
   }
 
-  const delimiter = (
-    <span className="euiDatePickerRange__delimeter">
-      <EuiIcon color={isInvalid ? 'danger' : 'subdued'} type="sortRight" />
-    </span>
-  );
-
   return (
-    <div className={classes} {...rest}>
-      {children ? (
-        children
-      ) : (
-        <Fragment>
-          {startControl}
-          {delimiter}
-          {endControl}
-        </Fragment>
-      )}
-    </div>
+    <EuiFormControlLayoutDelimited
+      icon={iconType === true ? 'calendar' : iconType || undefined}
+      className={classes}
+      startControl={startControl}
+      endControl={endControl}
+      fullWidth={fullWidth}
+      readOnly={readOnly}
+      isDisabled={disabled}
+      isInvalid={isInvalid}
+      append={append}
+      prepend={prepend}
+      {...rest}
+    />
   );
 };
diff --git a/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap b/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
index d753a10e5c1..c8c4d594cba 100644
--- a/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
+++ b/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
@@ -10,7 +10,8 @@ exports[`EuiSuperDatePicker is rendered 1`] = `
     <EuiFormControlLayout
       className="euiSuperDatePicker testClass1 testClass2"
       data-test-subj="test subject string"
-      isDisabled={false}
+      disabled={false}
+      isInvalid={false}
       prepend={
         <EuiQuickSelectPopover
           applyTime={[Function]}
@@ -235,70 +236,62 @@ exports[`EuiSuperDatePicker is rendered 1`] = `
         />
       }
     >
-      <EuiDatePickerRange
-        className="euiDatePickerRange--inGroup"
-        endDateControl={<div />}
-        iconType={false}
-        isCustom={true}
-        startDateControl={<div />}
+      <button
+        className="euiSuperDatePicker__prettyFormat"
+        data-test-subj="superDatePickerShowDatesButton"
+        disabled={false}
+        onClick={[Function]}
       >
-        <button
-          className="euiSuperDatePicker__prettyFormat"
-          data-test-subj="superDatePickerShowDatesButton"
-          disabled={false}
-          onClick={[Function]}
-        >
-          <PrettyDuration
-            dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
-            quickRanges={
-              Array [
-                Object {
-                  "end": "now/d",
-                  "label": "Today",
-                  "start": "now/d",
-                },
-                Object {
-                  "end": "now/w",
-                  "label": "This week",
-                  "start": "now/w",
-                },
-                Object {
-                  "end": "now/M",
-                  "label": "This month",
-                  "start": "now/M",
-                },
-                Object {
-                  "end": "now/y",
-                  "label": "This year",
-                  "start": "now/y",
-                },
-                Object {
-                  "end": "now-1d/d",
-                  "label": "Yesterday",
-                  "start": "now-1d/d",
-                },
-                Object {
-                  "end": "now",
-                  "label": "Week to date",
-                  "start": "now/w",
-                },
-                Object {
-                  "end": "now",
-                  "label": "Month to date",
-                  "start": "now/M",
-                },
-                Object {
-                  "end": "now",
-                  "label": "Year to date",
-                  "start": "now/y",
-                },
-              ]
-            }
-            timeFrom="now-15m"
-            timeTo="now"
-          />
-        </button>
-      </EuiDatePickerRange>
+        <PrettyDuration
+          dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
+          quickRanges={
+            Array [
+              Object {
+                "end": "now/d",
+                "label": "Today",
+                "start": "now/d",
+              },
+              Object {
+                "end": "now/w",
+                "label": "This week",
+                "start": "now/w",
+              },
+              Object {
+                "end": "now/M",
+                "label": "This month",
+                "start": "now/M",
+              },
+              Object {
+                "end": "now/y",
+                "label": "This year",
+                "start": "now/y",
+              },
+              Object {
+                "end": "now-1d/d",
+                "label": "Yesterday",
+                "start": "now-1d/d",
+              },
+              Object {
+                "end": "now",
+                "label": "Week to date",
+                "start": "now/w",
+              },
+              Object {
+                "end": "now",
+                "label": "Month to date",
+                "start": "now/M",
+              },
+              Object {
+                "end": "now",
+                "label": "Year to date",
+                "start": "now/y",
+              },
+            ]
+          }
+          timeFrom="now-15m"
+          timeTo="now"
+        />
+      </button>
     </EuiFormControlLayout>
   </EuiFlexItem>
   <EuiFlexItem
@@ -335,7 +328,8 @@ exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormCo
     <EuiFormControlLayout
       className="euiSuperDatePicker"
       data-test-subj="mySuperDatePicker"
-      isDisabled={false}
+      disabled={false}
+      isInvalid={false}
       prepend={
         <EuiQuickSelectPopover
           applyTime={[Function]}
@@ -560,70 +554,62 @@ exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormCo
         />
       }
     >
-      <EuiDatePickerRange
-        className="euiDatePickerRange--inGroup"
-        endDateControl={<div />}
-        iconType={false}
-        isCustom={true}
-        startDateControl={<div />}
+      <button
+        className="euiSuperDatePicker__prettyFormat"
+        data-test-subj="superDatePickerShowDatesButton"
+        disabled={false}
+        onClick={[Function]}
       >
-        <button
-          className="euiSuperDatePicker__prettyFormat"
-          data-test-subj="superDatePickerShowDatesButton"
-          disabled={false}
-          onClick={[Function]}
-        >
-          <PrettyDuration
-            dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
-            quickRanges={
-              Array [
-                Object {
-                  "end": "now/d",
-                  "label": "Today",
-                  "start": "now/d",
-                },
-                Object {
-                  "end": "now/w",
-                  "label": "This week",
-                  "start": "now/w",
-                },
-                Object {
-                  "end": "now/M",
-                  "label": "This month",
-                  "start": "now/M",
-                },
-                Object {
-                  "end": "now/y",
-                  "label": "This year",
-                  "start": "now/y",
-                },
-                Object {
-                  "end": "now-1d/d",
-                  "label": "Yesterday",
-                  "start": "now-1d/d",
-                },
-                Object {
-                  "end": "now",
-                  "label": "Week to date",
-                  "start": "now/w",
-                },
-                Object {
-                  "end": "now",
-                  "label": "Month to date",
-                  "start": "now/M",
-                },
-                Object {
-                  "end": "now",
-                  "label": "Year to date",
-                  "start": "now/y",
-                },
-              ]
-            }
-            timeFrom="now-15m"
-            timeTo="now"
-          />
-        </button>
-      </EuiDatePickerRange>
+        <PrettyDuration
+          dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
+          quickRanges={
+            Array [
+              Object {
+                "end": "now/d",
+                "label": "Today",
+                "start": "now/d",
+              },
+              Object {
+                "end": "now/w",
+                "label": "This week",
+                "start": "now/w",
+              },
+              Object {
+                "end": "now/M",
+                "label": "This month",
+                "start": "now/M",
+              },
+              Object {
+                "end": "now/y",
+                "label": "This year",
+                "start": "now/y",
+              },
+              Object {
+                "end": "now-1d/d",
+                "label": "Yesterday",
+                "start": "now-1d/d",
+              },
+              Object {
+                "end": "now",
+                "label": "Week to date",
+                "start": "now/w",
+              },
+              Object {
+                "end": "now",
+                "label": "Month to date",
+                "start": "now/M",
+              },
+              Object {
+                "end": "now",
+                "label": "Year to date",
+                "start": "now/y",
+              },
+            ]
+          }
+          timeFrom="now-15m"
+          timeTo="now"
+        />
+      </button>
     </EuiFormControlLayout>
   </EuiFlexItem>
   <EuiFlexItem
@@ -660,7 +646,8 @@ exports[`EuiSuperDatePicker props compressed is rendered 1`] = `
     <EuiFormControlLayout
       className="euiSuperDatePicker"
       compressed={true}
-      isDisabled={false}
+      disabled={false}
+      isInvalid={false}
       prepend={
         <EuiQuickSelectPopover
           applyTime={[Function]}
@@ -885,110 +872,102 @@ exports[`EuiSuperDatePicker props compressed is rendered 1`] = `
         />
       }
     >
-      <EuiDatePickerRange
-        className="euiDatePickerRange--inGroup"
-        endDateControl={<div />}
-        iconType={false}
-        isCustom={true}
-        startDateControl={<div />}
+      <button
+        className="euiSuperDatePicker__prettyFormat"
+        data-test-subj="superDatePickerShowDatesButton"
+        disabled={false}
+        onClick={[Function]}
       >
-        <button
-          className="euiSuperDatePicker__prettyFormat"
-          data-test-subj="superDatePickerShowDatesButton"
-          disabled={false}
-          onClick={[Function]}
-        >
-          <PrettyDuration
-            dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
-            quickRanges={
-              Array [
-                Object {
-                  "end": "now/d",
-                  "label": "Today",
-                  "start": "now/d",
-                },
-                Object {
-                  "end": "now/w",
-                  "label": "This week",
-                  "start": "now/w",
-                },
-                Object {
-                  "end": "now/M",
-                  "label": "This month",
-                  "start": "now/M",
-                },
-                Object {
-                  "end": "now/y",
-                  "label": "This year",
-                  "start": "now/y",
-                },
-                Object {
-                  "end": "now-1d/d",
-                  "label": "Yesterday",
-                  "start": "now-1d/d",
-                },
-                Object {
-                  "end": "now",
-                  "label": "Week to date",
-                  "start": "now/w",
-                },
-                Object {
-                  "end": "now",
-                  "label": "Month to date",
-                  "start": "now/M",
-                },
-                Object {
-                  "end": "now",
-                  "label": "Year to date",
-                  "start": "now/y",
-                },
-              ]
-            }
-            timeFrom="now-15m"
-            timeTo="now"
-          />
-        </button>
-      </EuiDatePickerRange>
-    </EuiFormControlLayout>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  >
-    <EuiSuperUpdateButton
-      data-test-subj="superDatePickerApplyTimeButton"
-      fill={true}
-      iconOnly={false}
-      isDisabled={false}
-      isLoading={false}
-      needsUpdate={false}
-      onClick={[Function]}
-      responsive={
-        Array [
-          "xs",
-          "s",
-        ]
-      }
-      showTooltip={true}
-      size="s"
-    />
-  </EuiFlexItem>
-</EuiFlexGroup>
-`;
-
-exports[`EuiSuperDatePicker props isAutoRefreshOnly is rendered 1`] = `
-<EuiFlexGroup
-  className="euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--isAutoRefreshOnly"
-  gutterSize="s"
-  responsive={false}
->
-  <EuiFlexItem>
-    <EuiAutoRefresh
-      fullWidth={false}
-      isDisabled={false}
-      isPaused={true}
-      onRefreshChange={[Function]}
-      refreshInterval={1000}
-    />
+        <PrettyDuration
+          dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
+          quickRanges={
+            Array [
+              Object {
+                "end": "now/d",
+                "label": "Today",
+                "start": "now/d",
+              },
+              Object {
+                "end": "now/w",
+                "label": "This week",
+                "start": "now/w",
+              },
+              Object {
+                "end": "now/M",
+                "label": "This month",
+                "start": "now/M",
+              },
+              Object {
+                "end": "now/y",
+                "label": "This year",
+                "start": "now/y",
+              },
+              Object {
+                "end": "now-1d/d",
+                "label": "Yesterday",
+                "start": "now-1d/d",
+              },
+              Object {
+                "end": "now",
+                "label": "Week to date",
+                "start": "now/w",
+              },
+              Object {
+                "end": "now",
+                "label": "Month to date",
+                "start": "now/M",
+              },
+              Object {
+                "end": "now",
+                "label": "Year to date",
+                "start": "now/y",
+              },
+            ]
+          }
+          timeFrom="now-15m"
+          timeTo="now"
+        />
+      </button>
+    </EuiFormControlLayout>
+  </EuiFlexItem>
+  <EuiFlexItem
+    grow={false}
+  >
+    <EuiSuperUpdateButton
+      data-test-subj="superDatePickerApplyTimeButton"
+      fill={true}
+      iconOnly={false}
+      isDisabled={false}
+      isLoading={false}
+      needsUpdate={false}
+      onClick={[Function]}
+      responsive={
+        Array [
+          "xs",
+          "s",
+        ]
+      }
+      showTooltip={true}
+      size="s"
+    />
+  </EuiFlexItem>
+</EuiFlexGroup>
+`;
+
+exports[`EuiSuperDatePicker props isAutoRefreshOnly is rendered 1`] = `
+<EuiFlexGroup
+  className="euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--isAutoRefreshOnly"
+  gutterSize="s"
+  responsive={false}
+>
+  <EuiFlexItem>
+    <EuiAutoRefresh
+      fullWidth={false}
+      isDisabled={false}
+      isPaused={true}
+      onRefreshChange={[Function]}
+      refreshInterval={1000}
+    />
   </EuiFlexItem>
 </EuiFlexGroup>
 `;
@@ -1021,7 +1000,9 @@ exports[`EuiSuperDatePicker props isQuickSelectOnly is rendered 1`] = `
   <EuiFlexItem>
     <EuiFormControlLayout
       className="euiSuperDatePicker"
-      isDisabled={false}
+      disabled={false}
+      iconsPosition="static"
+      isInvalid={false}
       prepend={
         <EuiQuickSelectPopover
           applyTime={[Function]}
@@ -1280,7 +1261,8 @@ exports[`EuiSuperDatePicker props showUpdateButton can be false 1`] = `
   <EuiFlexItem>
     <EuiFormControlLayout
       className="euiSuperDatePicker"
-      isDisabled={false}
+      disabled={false}
+      isInvalid={false}
       prepend={
         <EuiQuickSelectPopover
           applyTime={[Function]}
@@ -1505,70 +1487,62 @@ exports[`EuiSuperDatePicker props showUpdateButton can be false 1`] = `
         />
       }
     >
-      <EuiDatePickerRange
-        className="euiDatePickerRange--inGroup"
-        endDateControl={<div />}
-        iconType={false}
-        isCustom={true}
-        startDateControl={<div />}
+      <button
+        className="euiSuperDatePicker__prettyFormat"
+        data-test-subj="superDatePickerShowDatesButton"
+        disabled={false}
+        onClick={[Function]}
       >
-        <button
-          className="euiSuperDatePicker__prettyFormat"
-          data-test-subj="superDatePickerShowDatesButton"
-          disabled={false}
-          onClick={[Function]}
-        >
-          <PrettyDuration
-            dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
-            quickRanges={
-              Array [
-                Object {
-                  "end": "now/d",
-                  "label": "Today",
-                  "start": "now/d",
-                },
-                Object {
-                  "end": "now/w",
-                  "label": "This week",
-                  "start": "now/w",
-                },
-                Object {
-                  "end": "now/M",
-                  "label": "This month",
-                  "start": "now/M",
-                },
-                Object {
-                  "end": "now/y",
-                  "label": "This year",
-                  "start": "now/y",
-                },
-                Object {
-                  "end": "now-1d/d",
-                  "label": "Yesterday",
-                  "start": "now-1d/d",
-                },
-                Object {
-                  "end": "now",
-                  "label": "Week to date",
-                  "start": "now/w",
-                },
-                Object {
-                  "end": "now",
-                  "label": "Month to date",
-                  "start": "now/M",
-                },
-                Object {
-                  "end": "now",
-                  "label": "Year to date",
-                  "start": "now/y",
-                },
-              ]
-            }
-            timeFrom="now-15m"
-            timeTo="now"
-          />
-        </button>
-      </EuiDatePickerRange>
+        <PrettyDuration
+          dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
+          quickRanges={
+            Array [
+              Object {
+                "end": "now/d",
+                "label": "Today",
+                "start": "now/d",
+              },
+              Object {
+                "end": "now/w",
+                "label": "This week",
+                "start": "now/w",
+              },
+              Object {
+                "end": "now/M",
+                "label": "This month",
+                "start": "now/M",
+              },
+              Object {
+                "end": "now/y",
+                "label": "This year",
+                "start": "now/y",
+              },
+              Object {
+                "end": "now-1d/d",
+                "label": "Yesterday",
+                "start": "now-1d/d",
+              },
+              Object {
+                "end": "now",
+                "label": "Week to date",
+                "start": "now/w",
+              },
+              Object {
+                "end": "now",
+                "label": "Month to date",
+                "start": "now/M",
+              },
+              Object {
+                "end": "now",
+                "label": "Year to date",
+                "start": "now/y",
+              },
+            ]
+          }
+          timeFrom="now-15m"
+          timeTo="now"
+        />
+      </button>
     </EuiFormControlLayout>
   </EuiFlexItem>
 </EuiFlexGroup>
@@ -1583,7 +1557,8 @@ exports[`EuiSuperDatePicker props showUpdateButton can be iconOnly 1`] = `
   <EuiFlexItem>
     <EuiFormControlLayout
       className="euiSuperDatePicker"
-      isDisabled={false}
+      disabled={false}
+      isInvalid={false}
       prepend={
         <EuiQuickSelectPopover
           applyTime={[Function]}
@@ -1808,70 +1783,62 @@ exports[`EuiSuperDatePicker props showUpdateButton can be iconOnly 1`] = `
         />
       }
     >
-      <EuiDatePickerRange
-        className="euiDatePickerRange--inGroup"
-        endDateControl={<div />}
-        iconType={false}
-        isCustom={true}
-        startDateControl={<div />}
+      <button
+        className="euiSuperDatePicker__prettyFormat"
+        data-test-subj="superDatePickerShowDatesButton"
+        disabled={false}
+        onClick={[Function]}
       >
-        <button
-          className="euiSuperDatePicker__prettyFormat"
-          data-test-subj="superDatePickerShowDatesButton"
-          disabled={false}
-          onClick={[Function]}
-        >
-          <PrettyDuration
-            dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
-            quickRanges={
-              Array [
-                Object {
-                  "end": "now/d",
-                  "label": "Today",
-                  "start": "now/d",
-                },
-                Object {
-                  "end": "now/w",
-                  "label": "This week",
-                  "start": "now/w",
-                },
-                Object {
-                  "end": "now/M",
-                  "label": "This month",
-                  "start": "now/M",
-                },
-                Object {
-                  "end": "now/y",
-                  "label": "This year",
-                  "start": "now/y",
-                },
-                Object {
-                  "end": "now-1d/d",
-                  "label": "Yesterday",
-                  "start": "now-1d/d",
-                },
-                Object {
-                  "end": "now",
-                  "label": "Week to date",
-                  "start": "now/w",
-                },
-                Object {
-                  "end": "now",
-                  "label": "Month to date",
-                  "start": "now/M",
-                },
-                Object {
-                  "end": "now",
-                  "label": "Year to date",
-                  "start": "now/y",
-                },
-              ]
-            }
-            timeFrom="now-15m"
-            timeTo="now"
-          />
-        </button>
-      </EuiDatePickerRange>
+        <PrettyDuration
+          dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
+          quickRanges={
+            Array [
+              Object {
+                "end": "now/d",
+                "label": "Today",
+                "start": "now/d",
+              },
+              Object {
+                "end": "now/w",
+                "label": "This week",
+                "start": "now/w",
+              },
+              Object {
+                "end": "now/M",
+                "label": "This month",
+                "start": "now/M",
+              },
+              Object {
+                "end": "now/y",
+                "label": "This year",
+                "start": "now/y",
+              },
+              Object {
+                "end": "now-1d/d",
+                "label": "Yesterday",
+                "start": "now-1d/d",
+              },
+              Object {
+                "end": "now",
+                "label": "Week to date",
+                "start": "now/w",
+              },
+              Object {
+                "end": "now",
+                "label": "Month to date",
+                "start": "now/M",
+              },
+              Object {
+                "end": "now",
+                "label": "Year to date",
+                "start": "now/y",
+              },
+            ]
+          }
+          timeFrom="now-15m"
+          timeTo="now"
+        />
+      </button>
     </EuiFormControlLayout>
   </EuiFlexItem>
   <EuiFlexItem
@@ -1907,7 +1874,8 @@ exports[`EuiSuperDatePicker props width can be auto 1`] = `
   <EuiFlexItem>
     <EuiFormControlLayout
       className="euiSuperDatePicker"
-      isDisabled={false}
+      disabled={false}
+      isInvalid={false}
       prepend={
         <EuiQuickSelectPopover
           applyTime={[Function]}
@@ -2132,70 +2100,62 @@ exports[`EuiSuperDatePicker props width can be auto 1`] = `
         />
       }
     >
-      <EuiDatePickerRange
-        className="euiDatePickerRange--inGroup"
-        endDateControl={<div />}
-        iconType={false}
-        isCustom={true}
-        startDateControl={<div />}
+      <button
+        className="euiSuperDatePicker__prettyFormat"
+        data-test-subj="superDatePickerShowDatesButton"
+        disabled={false}
+        onClick={[Function]}
       >
-        <button
-          className="euiSuperDatePicker__prettyFormat"
-          data-test-subj="superDatePickerShowDatesButton"
-          disabled={false}
-          onClick={[Function]}
-        >
-          <PrettyDuration
-            dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
-            quickRanges={
-              Array [
-                Object {
-                  "end": "now/d",
-                  "label": "Today",
-                  "start": "now/d",
-                },
-                Object {
-                  "end": "now/w",
-                  "label": "This week",
-                  "start": "now/w",
-                },
-                Object {
-                  "end": "now/M",
-                  "label": "This month",
-                  "start": "now/M",
-                },
-                Object {
-                  "end": "now/y",
-                  "label": "This year",
-                  "start": "now/y",
-                },
-                Object {
-                  "end": "now-1d/d",
-                  "label": "Yesterday",
-                  "start": "now-1d/d",
-                },
-                Object {
-                  "end": "now",
-                  "label": "Week to date",
-                  "start": "now/w",
-                },
-                Object {
-                  "end": "now",
-                  "label": "Month to date",
-                  "start": "now/M",
-                },
-                Object {
-                  "end": "now",
-                  "label": "Year to date",
-                  "start": "now/y",
-                },
-              ]
-            }
-            timeFrom="now-15m"
-            timeTo="now"
-          />
-        </button>
-      </EuiDatePickerRange>
+        <PrettyDuration
+          dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
+          quickRanges={
+            Array [
+              Object {
+                "end": "now/d",
+                "label": "Today",
+                "start": "now/d",
+              },
+              Object {
+                "end": "now/w",
+                "label": "This week",
+                "start": "now/w",
+              },
+              Object {
+                "end": "now/M",
+                "label": "This month",
+                "start": "now/M",
+              },
+              Object {
+                "end": "now/y",
+                "label": "This year",
+                "start": "now/y",
+              },
+              Object {
+                "end": "now-1d/d",
+                "label": "Yesterday",
+                "start": "now-1d/d",
+              },
+              Object {
+                "end": "now",
+                "label": "Week to date",
+                "start": "now/w",
+              },
+              Object {
+                "end": "now",
+                "label": "Month to date",
+                "start": "now/M",
+              },
+              Object {
+                "end": "now",
+                "label": "Year to date",
+                "start": "now/y",
+              },
+            ]
+          }
+          timeFrom="now-15m"
+          timeTo="now"
+        />
+      </button>
     </EuiFormControlLayout>
   </EuiFlexItem>
   <EuiFlexItem
@@ -2231,7 +2191,8 @@ exports[`EuiSuperDatePicker props width can be full 1`] = `
   <EuiFlexItem>
     <EuiFormControlLayout
       className="euiSuperDatePicker"
-      isDisabled={false}
+      disabled={false}
+      isInvalid={false}
       prepend={
         <EuiQuickSelectPopover
           applyTime={[Function]}
@@ -2456,70 +2417,62 @@ exports[`EuiSuperDatePicker props width can be full 1`] = `
         />
       }
     >
-      <EuiDatePickerRange
-        className="euiDatePickerRange--inGroup"
-        endDateControl={<div />}
-        iconType={false}
-        isCustom={true}
-        startDateControl={<div />}
+      <button
+        className="euiSuperDatePicker__prettyFormat"
+        data-test-subj="superDatePickerShowDatesButton"
+        disabled={false}
+        onClick={[Function]}
       >
-        <button
-          className="euiSuperDatePicker__prettyFormat"
-          data-test-subj="superDatePickerShowDatesButton"
-          disabled={false}
-          onClick={[Function]}
-        >
-          <PrettyDuration
-            dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
-            quickRanges={
-              Array [
-                Object {
-                  "end": "now/d",
-                  "label": "Today",
-                  "start": "now/d",
-                },
-                Object {
-                  "end": "now/w",
-                  "label": "This week",
-                  "start": "now/w",
-                },
-                Object {
-                  "end": "now/M",
-                  "label": "This month",
-                  "start": "now/M",
-                },
-                Object {
-                  "end": "now/y",
-                  "label": "This year",
-                  "start": "now/y",
-                },
-                Object {
-                  "end": "now-1d/d",
-                  "label": "Yesterday",
-                  "start": "now-1d/d",
-                },
-                Object {
-                  "end": "now",
-                  "label": "Week to date",
-                  "start": "now/w",
-                },
-                Object {
-                  "end": "now",
-                  "label": "Month to date",
-                  "start": "now/M",
-                },
-                Object {
-                  "end": "now",
-                  "label": "Year to date",
-                  "start": "now/y",
-                },
-              ]
-            }
-            timeFrom="now-15m"
-            timeTo="now"
-          />
-        </button>
-      </EuiDatePickerRange>
+        <PrettyDuration
+          dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
+          quickRanges={
+            Array [
+              Object {
+                "end": "now/d",
+                "label": "Today",
+                "start": "now/d",
+              },
+              Object {
+                "end": "now/w",
+                "label": "This week",
+                "start": "now/w",
+              },
+              Object {
+                "end": "now/M",
+                "label": "This month",
+                "start": "now/M",
+              },
+              Object {
+                "end": "now/y",
+                "label": "This year",
+                "start": "now/y",
+              },
+              Object {
+                "end": "now-1d/d",
+                "label": "Yesterday",
+                "start": "now-1d/d",
+              },
+              Object {
+                "end": "now",
+                "label": "Week to date",
+                "start": "now/w",
+              },
+              Object {
+                "end": "now",
+                "label": "Month to date",
+                "start": "now/M",
+              },
+              Object {
+                "end": "now",
+                "label": "Year to date",
+                "start": "now/y",
+              },
+            ]
+          }
+          timeFrom="now-15m"
+          timeTo="now"
+        />
+      </button>
     </EuiFormControlLayout>
   </EuiFlexItem>
   <EuiFlexItem
diff --git a/src/components/date_picker/super_date_picker/_super_date_picker.scss b/src/components/date_picker/super_date_picker/_super_date_picker.scss
index f48300548a7..0d2b3f368a5 100644
--- a/src/components/date_picker/super_date_picker/_super_date_picker.scss
+++ b/src/components/date_picker/super_date_picker/_super_date_picker.scss
@@ -38,22 +38,17 @@
   max-width: 100% !important;
 
   > .euiFormControlLayout__childrenWrapper {
-    flex: 1 1 100%;
+    display: flex;
+    align-items: center;
     overflow: hidden;
+    background-color: $euiFormBackgroundColor;
 
-    > .euiDatePickerRange {
-      max-width: none;
-      width: auto;
+    &:last-child {
       border-radius: 0 $euiFormControlBorderRadius $euiFormControlBorderRadius 0;
     }
 
-    &:not(:last-child) > .euiDatePickerRange {
-      &,
-      .euiDatePopoverButton--end,
-      .euiSuperDatePicker__prettyFormat {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
+    & > .euiFormControlLayoutDelimited__input {
+      flex-grow: 1;
     }
   }
 }
@@ -75,3 +70,20 @@
     cursor: not-allowed;
   }
 }
+
+/**
+* Make the arrow delimiter match the colors of `.euiDatePopoverButton-needsUpdating`
+*/
+.euiSuperDatePicker--needsUpdating.euiFormControlLayoutDelimited { // Extra specificity needed to override default delimited styles
+  .euiFormControlLayout__childrenWrapper {
+    background-color: $euiSuperDatePickerNeedsUpdatingBackgroundColor;
+  }
+
+  .euiFormControlLayoutDelimited__delimiter {
+    color: $euiSuperDatePickerNeedsUpdatingTextColor;
+  }
+}
+
+.euiSuperDatePicker .euiFormControlLayout__childrenWrapper {
+  transition: background $euiAnimSpeedFast ease-in; // Match @mixin euiSuperDatePickerText / .euiDatePopoverButton
+}
diff --git a/src/components/date_picker/super_date_picker/_variables.scss b/src/components/date_picker/super_date_picker/_variables.scss
index 83f209098c2..d881875a56e 100644
--- a/src/components/date_picker/super_date_picker/_variables.scss
+++ b/src/components/date_picker/super_date_picker/_variables.scss
@@ -1,2 +1,5 @@
 $euiSuperDatePickerWidth: $euiSize * 30;
 $euiSuperDatePickerButtonWidth: $euiButtonMinWidth + ($euiSizeXS * 1.5);
+
+$euiSuperDatePickerNeedsUpdatingBackgroundColor: tintOrShade($euiColorSuccess, 90%, 70%);
+$euiSuperDatePickerNeedsUpdatingTextColor: makeHighContrastColor($euiColorSuccess, $euiSuperDatePickerNeedsUpdatingBackgroundColor);
diff --git a/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss b/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss
index 5042743941c..6d782d2ae18 100644
--- a/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss
+++ b/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss
@@ -13,11 +13,8 @@
   }
 
   &-needsUpdating {
-    $backgroundColor: tintOrShade($euiColorSuccess, 90%, 70%);
-    $textColor: makeHighContrastColor($euiColorSuccess, $backgroundColor);
-
-    background-color: $backgroundColor;
-    color: $textColor;
+    background-color: $euiSuperDatePickerNeedsUpdatingBackgroundColor;
+    color: $euiSuperDatePickerNeedsUpdatingTextColor;
 
     &:focus,
     &.euiDatePopoverButton-isSelected {
@@ -38,15 +35,16 @@
 
   &:disabled {
     background-color: $euiFormBackgroundDisabledColor;
+    background-image: none;
     color: $euiColorDarkShade;
     cursor: default;
   }
 }
 
 .euiDatePopoverButton--start {
-  text-align: right;
+  text-align: center;
 }
 
 .euiDatePopoverButton--end {
-  text-align: left;
+  text-align: center;
 }
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
index 09b2b778b60..ee65360e55b 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
@@ -108,7 +108,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
               </option>
             </select>
             <div
-              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
             >
               <span
                 class="euiFormControlLayoutCustomIcon"
@@ -194,7 +194,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
               </option>
             </select>
             <div
-              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
             >
               <span
                 class="euiFormControlLayoutCustomIcon"
diff --git a/src/components/date_picker/super_date_picker/super_date_picker.tsx b/src/components/date_picker/super_date_picker/super_date_picker.tsx
index a3c84150e4c..52c928cad84 100644
--- a/src/components/date_picker/super_date_picker/super_date_picker.tsx
+++ b/src/components/date_picker/super_date_picker/super_date_picker.tsx
@@ -396,6 +396,43 @@ export class EuiSuperDatePickerInternal extends Component<
     }
   };
 
+  renderQuickSelect = () => {
+    const {
+      start,
+      end,
+      customQuickSelectPanels,
+      customQuickSelectRender,
+      commonlyUsedRanges,
+      timeOptions,
+      dateFormat,
+      onRefreshChange,
+      recentlyUsedRanges,
+      refreshInterval,
+      isPaused,
+      isDisabled,
+    } = this.props;
+
+    return (
+      <EuiQuickSelectPopover
+        applyRefreshInterval={
+          onRefreshChange ? this.onRefreshChange : undefined
+        }
+        applyTime={this.applyQuickTime}
+        commonlyUsedRanges={commonlyUsedRanges}
+        customQuickSelectPanels={customQuickSelectPanels}
+        customQuickSelectRender={customQuickSelectRender}
+        dateFormat={dateFormat}
+        end={end}
+        isDisabled={isDisabled}
+        isPaused={isPaused}
+        recentlyUsedRanges={recentlyUsedRanges}
+        refreshInterval={refreshInterval}
+        start={start}
+        timeOptions={timeOptions}
+      />
+    );
+  };
+
   renderDatePickerRange = () => {
     const {
       end,
@@ -407,30 +444,61 @@ export class EuiSuperDatePickerInternal extends Component<
       start,
     } = this.state;
     const {
+      isQuickSelectOnly,
+      showUpdateButton,
       commonlyUsedRanges,
       timeOptions,
       dateFormat,
+      refreshInterval,
+      isPaused,
       isDisabled,
+      isLoading,
       locale,
       timeFormat,
       utcOffset,
       compressed,
       onFocus,
+      className,
+      'data-test-subj': dataTestSubj,
     } = this.props;
 
+    const autoRefreshAppend: EuiFormControlLayoutProps['append'] = !isPaused ? (
+      <EuiAutoRefreshButton
+        refreshInterval={refreshInterval}
+        isDisabled={isDisabled}
+        isPaused={isPaused}
+        onRefreshChange={this.onRefreshChange}
+        shortHand
+      />
+    ) : undefined;
+
+    const formControlLayoutProps = {
+      className: classNames('euiSuperDatePicker', className),
+      compressed,
+      isInvalid,
+      isLoading: isLoading && !showUpdateButton,
+      disabled: isDisabled,
+      prepend: this.renderQuickSelect(),
+      append: autoRefreshAppend,
+      'data-test-subj': dataTestSubj,
+    };
+
+    if (isQuickSelectOnly) {
+      return (
+        <EuiFormControlLayout
+          iconsPosition="static"
+          {...formControlLayoutProps}
+        />
+      );
+    }
+
     if (
       showPrettyDuration &&
       !isStartDatePopoverOpen &&
       !isEndDatePopoverOpen
     ) {
       return (
-        <EuiDatePickerRange
-          className="euiDatePickerRange--inGroup"
-          iconType={false}
-          isCustom
-          startDateControl={<div />}
-          endDateControl={<div />}
-        >
+        <EuiFormControlLayout {...formControlLayoutProps}>
           <button
             className={classNames('euiSuperDatePicker__prettyFormat', {
               'euiSuperDatePicker__prettyFormat--disabled': isDisabled,
@@ -447,7 +515,7 @@ export class EuiSuperDatePickerInternal extends Component<
               dateFormat={dateFormat}
             />
           </button>
-        </EuiDatePickerRange>
+        </EuiFormControlLayout>
       );
     }
 
@@ -455,11 +523,13 @@ export class EuiSuperDatePickerInternal extends Component<
       <EuiI18nConsumer>
         {({ locale: contextLocale }) => (
           <EuiDatePickerRange
-            className="euiDatePickerRange--inGroup"
+            {...formControlLayoutProps}
+            className={classNames(formControlLayoutProps.className, {
+              'euiSuperDatePicker--needsUpdating':
+                hasChanged && !isDisabled && !isInvalid,
+            })}
+            isCustom={true}
             iconType={false}
-            isInvalid={isInvalid}
-            disabled={isDisabled}
-            isCustom
             startDateControl={
               <EuiDatePopoverButton
                 className="euiSuperDatePicker__startPopoverButton"
@@ -550,20 +620,12 @@ export class EuiSuperDatePickerInternal extends Component<
 
   render() {
     const {
-      commonlyUsedRanges,
-      timeOptions,
-      customQuickSelectPanels,
-      customQuickSelectRender,
-      dateFormat,
-      end,
       isAutoRefreshOnly,
       isDisabled,
       isPaused,
       onRefreshChange,
-      recentlyUsedRanges,
       refreshInterval,
       showUpdateButton,
-      start,
       'data-test-subj': dataTestSubj,
       width: _width,
       isQuickSelectOnly,
@@ -574,37 +636,6 @@ export class EuiSuperDatePickerInternal extends Component<
     // Force reduction in width if showing quick select only
     const width = isQuickSelectOnly ? 'auto' : _width;
 
-    const autoRefreshAppend: EuiFormControlLayoutProps['append'] = !isPaused ? (
-      <EuiAutoRefreshButton
-        className="euiFormControlLayout__append"
-        refreshInterval={refreshInterval}
-        isDisabled={isDisabled}
-        isPaused={isPaused}
-        onRefreshChange={this.onRefreshChange}
-        shortHand
-      />
-    ) : undefined;
-
-    const quickSelect = (
-      <EuiQuickSelectPopover
-        applyRefreshInterval={
-          onRefreshChange ? this.onRefreshChange : undefined
-        }
-        applyTime={this.applyQuickTime}
-        commonlyUsedRanges={commonlyUsedRanges}
-        customQuickSelectPanels={customQuickSelectPanels}
-        customQuickSelectRender={customQuickSelectRender}
-        dateFormat={dateFormat}
-        end={end}
-        isDisabled={isDisabled}
-        isPaused={isPaused}
-        recentlyUsedRanges={recentlyUsedRanges}
-        refreshInterval={refreshInterval}
-        start={start}
-        timeOptions={timeOptions}
-      />
-    );
-
     const flexWrapperClasses = classNames('euiSuperDatePicker__flexWrapper', {
       'euiSuperDatePicker__flexWrapper--noUpdateButton': !showUpdateButton,
       'euiSuperDatePicker__flexWrapper--isAutoRefreshOnly': isAutoRefreshOnly,
@@ -634,18 +665,7 @@ export class EuiSuperDatePickerInternal extends Component<
           </EuiFlexItem>
         ) : (
           <>
-            <EuiFlexItem>
-              <EuiFormControlLayout
-                className={classNames('euiSuperDatePicker', className)}
-                compressed={compressed}
-                isDisabled={isDisabled}
-                prepend={quickSelect}
-                append={autoRefreshAppend}
-                data-test-subj={dataTestSubj}
-              >
-                {!isQuickSelectOnly && this.renderDatePickerRange()}
-              </EuiFormControlLayout>
-            </EuiFlexItem>
+            <EuiFlexItem>{this.renderDatePickerRange()}</EuiFlexItem>
             {this.renderUpdateButton()}
           </>
         )}
diff --git a/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap b/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
index 7ce07f9abfe..57cd8caf400 100644
--- a/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
+++ b/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
@@ -7,20 +7,8 @@ exports[`EuiFieldPassword is rendered 1`] = `
   <div
     class="euiFormControlLayout__childrenWrapper"
   >
-    <eui-validatable-control>
-      <input
-        aria-label="aria-label"
-        class="euiFieldPassword testClass1 testClass2"
-        data-test-subj="test subject string"
-        id="1"
-        name="elastic"
-        placeholder="Placeholder"
-        type="password"
-        value="1"
-      />
-    </eui-validatable-control>
     <div
-      class="euiFormControlLayoutIcons"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
     >
       <span
         class="euiFormControlLayoutCustomIcon"
@@ -32,6 +20,18 @@ exports[`EuiFieldPassword is rendered 1`] = `
         />
       </span>
     </div>
+    <eui-validatable-control>
+      <input
+        aria-label="aria-label"
+        class="euiFieldPassword testClass1 testClass2"
+        data-test-subj="test subject string"
+        id="1"
+        name="elastic"
+        placeholder="Placeholder"
+        type="password"
+        value="1"
+      />
+    </eui-validatable-control>
   </div>
 </div>
 `;
@@ -43,14 +43,8 @@ exports[`EuiFieldPassword props compressed is rendered 1`] = `
   <div
     class="euiFormControlLayout__childrenWrapper"
   >
-    <eui-validatable-control>
-      <input
-        class="euiFieldPassword euiFieldPassword--compressed"
-        type="password"
-      />
-    </eui-validatable-control>
     <div
-      class="euiFormControlLayoutIcons"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
     >
       <span
         class="euiFormControlLayoutCustomIcon"
@@ -62,6 +56,12 @@ exports[`EuiFieldPassword props compressed is rendered 1`] = `
         />
       </span>
     </div>
+    <eui-validatable-control>
+      <input
+        class="euiFieldPassword euiFieldPassword--compressed"
+        type="password"
+      />
+    </eui-validatable-control>
   </div>
 </div>
 `;
@@ -73,14 +73,8 @@ exports[`EuiFieldPassword props dual dual type also renders append 1`] = `
   <div
     class="euiFormControlLayout__childrenWrapper"
   >
-    <eui-validatable-control>
-      <input
-        class="euiFieldPassword euiFieldPassword--inGroup euiFieldPassword--withToggle"
-        type="password"
-      />
-    </eui-validatable-control>
     <div
-      class="euiFormControlLayoutIcons"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
     >
       <span
         class="euiFormControlLayoutCustomIcon"
@@ -92,6 +86,12 @@ exports[`EuiFieldPassword props dual dual type also renders append 1`] = `
         />
       </span>
     </div>
+    <eui-validatable-control>
+      <input
+        class="euiFieldPassword euiFieldPassword--inGroup euiFieldPassword--withToggle"
+        type="password"
+      />
+    </eui-validatable-control>
   </div>
   <label
     class="euiFormLabel euiFormControlLayout__append"
@@ -126,14 +126,8 @@ exports[`EuiFieldPassword props dual dualToggleProps is rendered 1`] = `
   <div
     class="euiFormControlLayout__childrenWrapper"
   >
-    <eui-validatable-control>
-      <input
-        class="euiFieldPassword euiFieldPassword--inGroup euiFieldPassword--withToggle"
-        type="password"
-      />
-    </eui-validatable-control>
     <div
-      class="euiFormControlLayoutIcons"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
     >
       <span
         class="euiFormControlLayoutCustomIcon"
@@ -145,6 +139,12 @@ exports[`EuiFieldPassword props dual dualToggleProps is rendered 1`] = `
         />
       </span>
     </div>
+    <eui-validatable-control>
+      <input
+        class="euiFieldPassword euiFieldPassword--inGroup euiFieldPassword--withToggle"
+        type="password"
+      />
+    </eui-validatable-control>
   </div>
   <button
     aria-label="aria-label"
@@ -170,14 +170,8 @@ exports[`EuiFieldPassword props fullWidth is rendered 1`] = `
   <div
     class="euiFormControlLayout__childrenWrapper"
   >
-    <eui-validatable-control>
-      <input
-        class="euiFieldPassword euiFieldPassword--fullWidth"
-        type="password"
-      />
-    </eui-validatable-control>
     <div
-      class="euiFormControlLayoutIcons"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
     >
       <span
         class="euiFormControlLayoutCustomIcon"
@@ -189,6 +183,12 @@ exports[`EuiFieldPassword props fullWidth is rendered 1`] = `
         />
       </span>
     </div>
+    <eui-validatable-control>
+      <input
+        class="euiFieldPassword euiFieldPassword--fullWidth"
+        type="password"
+      />
+    </eui-validatable-control>
   </div>
 </div>
 `;
@@ -200,16 +200,8 @@ exports[`EuiFieldPassword props isInvalid is rendered 1`] = `
   <div
     class="euiFormControlLayout__childrenWrapper"
   >
-    <eui-validatable-control
-      isinvalid="true"
-    >
-      <input
-        class="euiFieldPassword euiFormControlLayout--1icons"
-        type="password"
-      />
-    </eui-validatable-control>
     <div
-      class="euiFormControlLayoutIcons"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
     >
       <span
         class="euiFormControlLayoutCustomIcon"
@@ -221,8 +213,16 @@ exports[`EuiFieldPassword props isInvalid is rendered 1`] = `
         />
       </span>
     </div>
+    <eui-validatable-control
+      isinvalid="true"
+    >
+      <input
+        class="euiFieldPassword euiFormControlLayout--1icons"
+        type="password"
+      />
+    </eui-validatable-control>
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
     >
       <span
         color="danger"
@@ -240,14 +240,8 @@ exports[`EuiFieldPassword props isLoading is rendered 1`] = `
   <div
     class="euiFormControlLayout__childrenWrapper"
   >
-    <eui-validatable-control>
-      <input
-        class="euiFieldPassword euiFormControlLayout--1icons euiFieldPassword-isLoading"
-        type="password"
-      />
-    </eui-validatable-control>
     <div
-      class="euiFormControlLayoutIcons"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
     >
       <span
         class="euiFormControlLayoutCustomIcon"
@@ -259,8 +253,14 @@ exports[`EuiFieldPassword props isLoading is rendered 1`] = `
         />
       </span>
     </div>
+    <eui-validatable-control>
+      <input
+        class="euiFieldPassword euiFormControlLayout--1icons euiFieldPassword-isLoading"
+        type="password"
+      />
+    </eui-validatable-control>
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
     >
       <span
         aria-label="Loading"
@@ -284,14 +284,8 @@ exports[`EuiFieldPassword props prepend and append is rendered 1`] = `
   <div
     class="euiFormControlLayout__childrenWrapper"
   >
-    <eui-validatable-control>
-      <input
-        class="euiFieldPassword euiFieldPassword--inGroup"
-        type="password"
-      />
-    </eui-validatable-control>
     <div
-      class="euiFormControlLayoutIcons"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
     >
       <span
         class="euiFormControlLayoutCustomIcon"
@@ -303,6 +297,12 @@ exports[`EuiFieldPassword props prepend and append is rendered 1`] = `
         />
       </span>
     </div>
+    <eui-validatable-control>
+      <input
+        class="euiFieldPassword euiFieldPassword--inGroup"
+        type="password"
+      />
+    </eui-validatable-control>
   </div>
   <label
     class="euiFormLabel euiFormControlLayout__append"
@@ -319,14 +319,8 @@ exports[`EuiFieldPassword props type dual is rendered 1`] = `
   <div
     class="euiFormControlLayout__childrenWrapper"
   >
-    <eui-validatable-control>
-      <input
-        class="euiFieldPassword euiFieldPassword--inGroup euiFieldPassword--withToggle"
-        type="password"
-      />
-    </eui-validatable-control>
     <div
-      class="euiFormControlLayoutIcons"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
     >
       <span
         class="euiFormControlLayoutCustomIcon"
@@ -338,6 +332,12 @@ exports[`EuiFieldPassword props type dual is rendered 1`] = `
         />
       </span>
     </div>
+    <eui-validatable-control>
+      <input
+        class="euiFieldPassword euiFieldPassword--inGroup euiFieldPassword--withToggle"
+        type="password"
+      />
+    </eui-validatable-control>
   </div>
   <button
     aria-label="Show password as plain text. Note: this will visually expose your password on the screen."
@@ -362,14 +362,8 @@ exports[`EuiFieldPassword props type password is rendered 1`] = `
   <div
     class="euiFormControlLayout__childrenWrapper"
   >
-    <eui-validatable-control>
-      <input
-        class="euiFieldPassword"
-        type="password"
-      />
-    </eui-validatable-control>
     <div
-      class="euiFormControlLayoutIcons"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
     >
       <span
         class="euiFormControlLayoutCustomIcon"
@@ -381,6 +375,12 @@ exports[`EuiFieldPassword props type password is rendered 1`] = `
         />
       </span>
     </div>
+    <eui-validatable-control>
+      <input
+        class="euiFieldPassword"
+        type="password"
+      />
+    </eui-validatable-control>
   </div>
 </div>
 `;
@@ -392,14 +392,8 @@ exports[`EuiFieldPassword props type text is rendered 1`] = `
   <div
     class="euiFormControlLayout__childrenWrapper"
   >
-    <eui-validatable-control>
-      <input
-        class="euiFieldPassword"
-        type="text"
-      />
-    </eui-validatable-control>
     <div
-      class="euiFormControlLayoutIcons"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
     >
       <span
         class="euiFormControlLayoutCustomIcon"
@@ -411,6 +405,12 @@ exports[`EuiFieldPassword props type text is rendered 1`] = `
         />
       </span>
     </div>
+    <eui-validatable-control>
+      <input
+        class="euiFieldPassword"
+        type="text"
+      />
+    </eui-validatable-control>
   </div>
 </div>
 `;
diff --git a/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap b/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap
index 3207fcb040a..226a92b3285 100644
--- a/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap
+++ b/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`EuiFormControlLayout props clear onClick is rendered 1`] = `
     class="euiFormControlLayout__childrenWrapper"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
     >
       <button
         aria-label="Clear input"
@@ -48,7 +48,7 @@ exports[`EuiFormControlLayout props compressed renders small-sized icon, clear b
     class="euiFormControlLayout__childrenWrapper"
   >
     <div
-      class="euiFormControlLayoutIcons"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
     >
       <span
         class="euiFormControlLayoutCustomIcon"
@@ -61,7 +61,7 @@ exports[`EuiFormControlLayout props compressed renders small-sized icon, clear b
       </span>
     </div>
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
     >
       <button
         aria-label="Clear input"
@@ -101,7 +101,7 @@ exports[`EuiFormControlLayout props icon is rendered as a string 1`] = `
     class="euiFormControlLayout__childrenWrapper"
   >
     <div
-      class="euiFormControlLayoutIcons"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
     >
       <span
         class="euiFormControlLayoutCustomIcon"
@@ -125,7 +125,7 @@ exports[`EuiFormControlLayout props icon is rendered as an object 1`] = `
     class="euiFormControlLayout__childrenWrapper"
   >
     <div
-      class="euiFormControlLayoutIcons"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
     >
       <span
         class="euiFormControlLayoutCustomIcon customClass"
@@ -150,7 +150,7 @@ exports[`EuiFormControlLayout props icon side left is rendered 1`] = `
     class="euiFormControlLayout__childrenWrapper"
   >
     <div
-      class="euiFormControlLayoutIcons"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
     >
       <span
         class="euiFormControlLayoutCustomIcon"
@@ -174,7 +174,7 @@ exports[`EuiFormControlLayout props icon side right is rendered 1`] = `
     class="euiFormControlLayout__childrenWrapper"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
     >
       <span
         class="euiFormControlLayoutCustomIcon"
@@ -190,6 +190,45 @@ exports[`EuiFormControlLayout props icon side right is rendered 1`] = `
 </div>
 `;
 
+exports[`EuiFormControlLayout props iconsPosition 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiFormControlLayout testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiFormControlLayout__childrenWrapper"
+  >
+    <div
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--static"
+    >
+      <span
+        class="euiFormControlLayoutCustomIcon"
+      >
+        <span
+          aria-hidden="true"
+          class="euiFormControlLayoutCustomIcon__icon"
+          data-euiicon-type="calendar"
+        />
+      </span>
+    </div>
+    <div
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--static"
+    >
+      <span
+        aria-label="Loading"
+        class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
+        role="progressbar"
+      />
+      <span
+        color="danger"
+        data-euiicon-type="warning"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiFormControlLayout props isDropdown is rendered 1`] = `
 <div
   class="euiFormControlLayout"
@@ -198,7 +237,7 @@ exports[`EuiFormControlLayout props isDropdown is rendered 1`] = `
     class="euiFormControlLayout__childrenWrapper"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
     >
       <span
         class="euiFormControlLayoutCustomIcon"
@@ -222,7 +261,7 @@ exports[`EuiFormControlLayout props isInvalid is rendered 1`] = `
     class="euiFormControlLayout__childrenWrapper"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
     >
       <span
         color="danger"
@@ -241,7 +280,7 @@ exports[`EuiFormControlLayout props isLoading is rendered 1`] = `
     class="euiFormControlLayout__childrenWrapper"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
     >
       <span
         aria-label="Loading"
diff --git a/src/components/form/form_control_layout/__snapshots__/form_control_layout_delimited.test.tsx.snap b/src/components/form/form_control_layout/__snapshots__/form_control_layout_delimited.test.tsx.snap
index 3f396138333..f5e986b346d 100644
--- a/src/components/form/form_control_layout/__snapshots__/form_control_layout_delimited.test.tsx.snap
+++ b/src/components/form/form_control_layout/__snapshots__/form_control_layout_delimited.test.tsx.snap
@@ -18,7 +18,6 @@ exports[`EuiFormControlLayoutDelimited is rendered 1`] = `
       class="euiText euiFormControlLayoutDelimited__delimiter emotion-euiText-s-euiTextColor-subdued"
     >
       <span
-        color="subdued"
         data-euiicon-type="sortRight"
       >
         to
diff --git a/src/components/form/form_control_layout/_form_control_layout.scss b/src/components/form/form_control_layout/_form_control_layout.scss
index 6f0a4dea77b..dcd8d2b0ca1 100644
--- a/src/components/form/form_control_layout/_form_control_layout.scss
+++ b/src/components/form/form_control_layout/_form_control_layout.scss
@@ -128,7 +128,7 @@
   // TEXT
 
   .euiFormLabel,
-  .euiText {
+  .euiText:not(.euiFormControlLayoutDelimited__delimiter) {
     background-color: $euiFormInputGroupLabelBackground;
     padding: $euiFormControlPadding;
     line-height: $euiSize !important;
@@ -171,7 +171,7 @@
 
     // Padding
     .euiFormLabel,
-    .euiText {
+    .euiText:not(.euiFormControlLayoutDelimited__delimiter) {
       padding: $euiFormControlCompressedPadding;
 
       // If the next sibling is not the input, pull it closer to the text to reduce space
diff --git a/src/components/form/form_control_layout/_form_control_layout_delimited.scss b/src/components/form/form_control_layout/_form_control_layout_delimited.scss
index 635e1087baf..fd90253a29b 100644
--- a/src/components/form/form_control_layout/_form_control_layout_delimited.scss
+++ b/src/components/form/form_control_layout/_form_control_layout_delimited.scss
@@ -5,37 +5,22 @@
   align-items: stretch;
   padding: 1px; /* 1 */
 
-  .euiFormControlLayoutDelimited__delimiter,
-  .euiFormControlLayoutIcons {
-    background-color: $euiFormBackgroundColor;
-  }
-
   > .euiFormControlLayout__childrenWrapper {
     display: flex;
     align-items: center;
     width: 100%;
+    background-color: $euiFormBackgroundColor;
   }
 
   // Target when the euiFormControlLayout is compressed without specifying the full class name in case it ever changes
   &[class*='--compressed'] {
     @include euiFormControlDefaultShadow($borderOnly: true);
     border-radius: $euiBorderRadius / 2;
-
-    .euiFormControlLayoutDelimited__input {
-      height: 100%;
-      max-width: none;
-      padding-left: $euiFormControlCompressedPadding;
-      padding-right: $euiFormControlCompressedPadding;
-    }
-
-    .euiFormControlLayoutIcons {
-      padding-inline: $euiFormControlCompressedPadding;
-    }
   }
 
   // Target when the euiFormControlLayout is fullWidth without specifying the full class name in case it ever changes
   &[class*='--fullWidth'] .euiFormControlLayout__childrenWrapper,
-  &[class*='--fullWidth'] input {
+  &[class*='--fullWidth'] .euiFormControlLayout__childrenWrapper > *:not(.euiFormControlLayoutDelimited__delimiter):not(.euiFormControlLayoutIcons) {
     width: 100%;
     max-width: none;
   }
@@ -44,8 +29,7 @@
   &[class*='-isDisabled'] {
     @include euiFormControlDisabledStyle;
 
-    .euiFormControlLayoutDelimited__delimiter,
-    .euiFormControlLayoutIcons {
+    .euiFormControlLayout__childrenWrapper {
       background-color: $euiFormBackgroundDisabledColor;
     }
   }
@@ -54,27 +38,12 @@
   &[class*='--readOnly'] {
     @include euiFormControlReadOnlyStyle;
 
-    input,
-    .euiFormControlLayoutDelimited__delimiter,
-    .euiFormControlLayoutIcons {
+    .euiFormControlLayout__childrenWrapper {
       background-color: $euiFormBackgroundReadOnlyColor;
     }
   }
 
-  .euiFormControlLayoutIcons {
-    // Absolutely positioning the icons doesn't work because they
-    // overlay only one of controls making the layout unbalanced
-    position: static; // Overrider absolute
-    padding-inline: $euiFormControlPadding;
-    align-self: stretch;
-    flex-grow: 0;
-
-    &:not(.euiFormControlLayoutIcons--right) {
-      order: -1;
-    }
-  }
-
-  &--isInvalid .euiFormControlLayoutIcons {
+  &--isInvalid .euiFormControlLayout__childrenWrapper {
     @include euiFormControlInvalidStyle;
   }
 }
@@ -95,8 +64,4 @@
   display: flex;
   align-items: center;
   line-height: 1; // Override EuiText line-height
-
-  &--isInvalid {
-    @include euiFormControlInvalidStyle;
-  }
 }
diff --git a/src/components/form/form_control_layout/_form_control_layout_icons.scss b/src/components/form/form_control_layout/_form_control_layout_icons.scss
index 732b12d1dcb..2ea455d2212 100644
--- a/src/components/form/form_control_layout/_form_control_layout_icons.scss
+++ b/src/components/form/form_control_layout/_form_control_layout_icons.scss
@@ -1,9 +1,5 @@
 .euiFormControlLayoutIcons {
   pointer-events: none;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: $euiFormControlPadding;
   display: flex;
   align-items: center;
 
@@ -11,9 +7,34 @@
     margin-left: $euiFormControlPadding / 2;
   }
 
-  .euiFormControlLayout--compressed & {
-    left: $euiFormControlCompressedPadding;
+  &--absolute {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: $euiFormControlPadding;
+
+    .euiFormControlLayout--compressed & {
+      left: $euiFormControlCompressedPadding;
+    }
   }
+
+  &--static {
+    // Absolutely positioning the icons sometimes doesn't work -
+    // in the case of delimited inputs, they overlay only one of controls making the layout unbalanced
+    position: static;
+    height: 100%;
+    align-self: stretch;
+    flex-grow: 0;
+    padding-inline: $euiFormControlPadding;
+
+    .euiFormControlLayout--compressed & {
+      padding-inline: $euiFormControlCompressedPadding;
+    }
+  }
+}
+
+.euiFormControlLayoutIcons--left {
+  z-index: 1; // Ensure the icon is visible above sibling inputs
 }
 
 .euiFormControlLayoutIcons--right {
diff --git a/src/components/form/form_control_layout/form_control_layout.test.tsx b/src/components/form/form_control_layout/form_control_layout.test.tsx
index feadc6bd397..61a82942334 100644
--- a/src/components/form/form_control_layout/form_control_layout.test.tsx
+++ b/src/components/form/form_control_layout/form_control_layout.test.tsx
@@ -12,7 +12,8 @@ import { render, mount } from 'enzyme';
 import { findTestSubject, requiredProps } from '../../../test';
 
 import { EuiForm } from '../form';
-import { EuiFormControlLayout, ICON_SIDES } from './form_control_layout';
+import { EuiFormControlLayout } from './form_control_layout';
+import { ICON_SIDES } from './form_control_layout_icons';
 
 jest.mock('../../', () => ({
   EuiIcon: 'eui_icon',
@@ -131,6 +132,20 @@ describe('EuiFormControlLayout', () => {
       expect(component).toMatchSnapshot();
     });
 
+    test('iconsPosition', () => {
+      const component = render(
+        <EuiFormControlLayout
+          iconsPosition="static"
+          icon="calendar"
+          isLoading
+          isInvalid
+          {...requiredProps}
+        />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
     describe('compressed', () => {
       it('renders small-sized icon, clear button, and loading spinner', () => {
         const component = render(
diff --git a/src/components/form/form_control_layout/form_control_layout.tsx b/src/components/form/form_control_layout/form_control_layout.tsx
index c585be791ac..5039efa0268 100644
--- a/src/components/form/form_control_layout/form_control_layout.tsx
+++ b/src/components/form/form_control_layout/form_control_layout.tsx
@@ -18,13 +18,12 @@ import classNames from 'classnames';
 import {
   EuiFormControlLayoutIcons,
   EuiFormControlLayoutIconsProps,
+  IconShape,
 } from './form_control_layout_icons';
 import { CommonProps } from '../../common';
 import { EuiFormLabel } from '../form_label';
 import { FormContext, FormContextValue } from '../eui_form_context';
 
-export { ICON_SIDES } from './form_control_layout_icons';
-
 type StringOrReactElement = string | ReactElement;
 type PrependAppendType = StringOrReactElement | StringOrReactElement[];
 
@@ -42,6 +41,7 @@ export type EuiFormControlLayoutProps = CommonProps &
     append?: PrependAppendType;
     children?: ReactNode;
     icon?: EuiFormControlLayoutIconsProps['icon'];
+    iconsPosition?: EuiFormControlLayoutIconsProps['iconsPosition'];
     clear?: EuiFormControlLayoutIconsProps['clear'];
     /**
      * Expand to fill 100% of the parent.
@@ -73,6 +73,7 @@ export class EuiFormControlLayout extends Component<EuiFormControlLayoutProps> {
     const {
       children,
       icon,
+      iconsPosition,
       clear,
       fullWidth = defaultFullWidth,
       isLoading,
@@ -82,7 +83,7 @@ export class EuiFormControlLayout extends Component<EuiFormControlLayoutProps> {
       prepend,
       append,
       readOnly,
-      isInvalid: invalid,
+      isInvalid,
       isDropdown,
       inputId,
       ...rest
@@ -107,22 +108,65 @@ export class EuiFormControlLayout extends Component<EuiFormControlLayoutProps> {
       <div className={classes} {...rest}>
         {prependNodes}
         <div className="euiFormControlLayout__childrenWrapper">
+          {this.renderLeftIcons()}
           {children}
-
-          <EuiFormControlLayoutIcons
-            icon={icon}
-            clear={clear}
-            compressed={compressed}
-            isLoading={isLoading}
-            isInvalid={invalid}
-            isDropdown={!readOnly && !isDisabled && isDropdown}
-          />
+          {this.renderRightIcons()}
         </div>
         {appendNodes}
       </div>
     );
   }
 
+  renderLeftIcons = () => {
+    const { icon, iconsPosition, compressed } = this.props;
+
+    const leftCustomIcon =
+      icon && (icon as IconShape)?.side !== 'right' ? icon : undefined;
+
+    return leftCustomIcon ? (
+      <EuiFormControlLayoutIcons
+        side="left"
+        icon={leftCustomIcon}
+        iconsPosition={iconsPosition}
+        compressed={compressed}
+      />
+    ) : null;
+  };
+
+  renderRightIcons = () => {
+    const {
+      icon,
+      iconsPosition,
+      clear,
+      compressed,
+      isLoading,
+      isInvalid,
+      isDisabled,
+      readOnly,
+      isDropdown,
+    } = this.props;
+    const hasDropdownIcon = !readOnly && !isDisabled && isDropdown;
+
+    const rightCustomIcon =
+      icon && (icon as IconShape)?.side === 'right' ? icon : undefined;
+
+    const hasRightIcons =
+      rightCustomIcon || clear || isLoading || isInvalid || hasDropdownIcon;
+
+    return hasRightIcons ? (
+      <EuiFormControlLayoutIcons
+        side="right"
+        icon={rightCustomIcon}
+        iconsPosition={iconsPosition}
+        compressed={compressed}
+        clear={clear}
+        isLoading={isLoading}
+        isInvalid={isInvalid}
+        isDropdown={hasDropdownIcon}
+      />
+    ) : null;
+  };
+
   renderSideNode(
     side: 'append' | 'prepend',
     nodes?: PrependAppendType,
diff --git a/src/components/form/form_control_layout/form_control_layout_delimited.tsx b/src/components/form/form_control_layout/form_control_layout_delimited.tsx
index 43ec8a79a20..8f0199eeddc 100644
--- a/src/components/form/form_control_layout/form_control_layout_delimited.tsx
+++ b/src/components/form/form_control_layout/form_control_layout_delimited.tsx
@@ -57,7 +57,7 @@ export const EuiFormControlLayoutDelimited: FunctionComponent<EuiFormControlLayo
   });
 
   return (
-    <EuiFormControlLayout className={classes} {...rest}>
+    <EuiFormControlLayout className={classes} iconsPosition="static" {...rest}>
       {addClassesToControl(startControl)}
       <EuiFormControlDelimiter
         delimiter={delimiter}
@@ -84,21 +84,18 @@ const EuiFormControlDelimiter = ({
   delimiter?: ReactNode;
   isInvalid?: boolean;
 }) => {
-  const classes = classNames('euiFormControlLayoutDelimited__delimiter', {
-    'euiFormControlLayoutDelimited__delimiter--isInvalid': isInvalid,
-  });
-  const color = isInvalid ? 'danger' : 'subdued';
-
   const defaultAriaLabel = useEuiI18n(
     'euiFormControlLayoutDelimited.delimiterLabel',
     'to'
   );
 
   return (
-    <EuiText className={classes} size="s" color={color}>
-      {delimiter ?? (
-        <EuiIcon color={color} type="sortRight" aria-label={defaultAriaLabel} />
-      )}
+    <EuiText
+      className="euiFormControlLayoutDelimited__delimiter"
+      size="s"
+      color={isInvalid ? 'danger' : 'subdued'}
+    >
+      {delimiter ?? <EuiIcon type="sortRight" aria-label={defaultAriaLabel} />}
     </EuiText>
   );
 };
diff --git a/src/components/form/form_control_layout/form_control_layout_icons.tsx b/src/components/form/form_control_layout/form_control_layout_icons.tsx
index 3c038c9ecc1..80d199802f5 100644
--- a/src/components/form/form_control_layout/form_control_layout_icons.tsx
+++ b/src/components/form/form_control_layout/form_control_layout_icons.tsx
@@ -6,7 +6,8 @@
  * Side Public License, v 1.
  */
 
-import React, { Fragment, Component } from 'react';
+import React, { Component } from 'react';
+import classNames from 'classnames';
 
 import { EuiLoadingSpinner } from '../../loading';
 import {
@@ -20,9 +21,9 @@ import {
 import { EuiIcon, IconColor, IconType } from '../../icon';
 import { DistributiveOmit } from '../../common';
 
-export const ICON_SIDES: ['left', 'right'] = ['left', 'right'];
+export const ICON_SIDES = ['left', 'right'] as const;
 
-type IconShape = DistributiveOmit<
+export type IconShape = DistributiveOmit<
   EuiFormControlLayoutCustomIconProps,
   'type' | 'iconRef'
 > & {
@@ -40,6 +41,8 @@ function isIconShape(
 
 export interface EuiFormControlLayoutIconsProps {
   icon?: IconType | IconShape;
+  side?: typeof ICON_SIDES[number];
+  iconsPosition?: 'absolute' | 'static';
   clear?: EuiFormControlLayoutClearButtonProps;
   isLoading?: boolean;
   isInvalid?: boolean;
@@ -51,46 +54,28 @@ export class EuiFormControlLayoutIcons extends Component<
   EuiFormControlLayoutIconsProps
 > {
   render() {
-    const { icon, isInvalid, isDropdown } = this.props;
-    const iconSide = isIconShape(icon) && icon.side ? icon.side : 'left';
+    const { side = 'left', iconsPosition = 'absolute' } = this.props;
+
     const customIcon = this.renderCustomIcon();
     const loadingSpinner = this.renderLoadingSpinner();
     const clearButton = this.renderClearButton();
     const invalidIcon = this.renderInvalidIcon();
     const dropdownIcon = this.renderDropdownIcon();
 
-    let leftIcons;
-
-    if (customIcon && iconSide === 'left') {
-      leftIcons = <div className="euiFormControlLayoutIcons">{customIcon}</div>;
-    }
-
-    let rightIcons;
-
-    // If the icon is on the right, it should be placed after the clear button in the DOM.
-    if (
-      clearButton ||
-      loadingSpinner ||
-      isInvalid ||
-      isDropdown ||
-      (customIcon && iconSide === 'right')
-    ) {
-      rightIcons = (
-        <div className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right">
-          {clearButton}
-          {loadingSpinner}
-          {invalidIcon}
-          {iconSide === 'right' ? customIcon : undefined}
-          {dropdownIcon}
-        </div>
-      );
-    }
+    const classes = classNames(
+      'euiFormControlLayoutIcons',
+      `euiFormControlLayoutIcons--${side}`,
+      `euiFormControlLayoutIcons--${iconsPosition}`
+    );
 
     return (
-      <Fragment>
-        {leftIcons}
-        {rightIcons}
-      </Fragment>
+      <div className={classes}>
+        {clearButton}
+        {loadingSpinner}
+        {invalidIcon}
+        {customIcon}
+        {dropdownIcon}
+      </div>
     );
   }
 
diff --git a/src/components/form/range/__snapshots__/dual_range.test.tsx.snap b/src/components/form/range/__snapshots__/dual_range.test.tsx.snap
index 759b2fa8f74..db1152e1a6b 100644
--- a/src/components/form/range/__snapshots__/dual_range.test.tsx.snap
+++ b/src/components/form/range/__snapshots__/dual_range.test.tsx.snap
@@ -545,7 +545,6 @@ exports[`EuiDualRange props loading should display when showInput="inputWithPopo
             class="euiText euiFormControlLayoutDelimited__delimiter emotion-euiText-s-euiTextColor-subdued"
           >
             <span
-              color="subdued"
               data-euiicon-type="sortRight"
             >
               to
@@ -562,7 +561,7 @@ exports[`EuiDualRange props loading should display when showInput="inputWithPopo
             value="8"
           />
           <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--static"
           >
             <span
               aria-label="Loading"
@@ -635,7 +634,6 @@ exports[`EuiDualRange props slider should display in popover 1`] = `
             class="euiText euiFormControlLayoutDelimited__delimiter emotion-euiText-s-euiTextColor-subdued"
           >
             <span
-              color="subdued"
               data-euiicon-type="sortRight"
             >
               to
diff --git a/src/components/form/range/__snapshots__/range.test.tsx.snap b/src/components/form/range/__snapshots__/range.test.tsx.snap
index 5620cb5b99b..a2266eb1c72 100644
--- a/src/components/form/range/__snapshots__/range.test.tsx.snap
+++ b/src/components/form/range/__snapshots__/range.test.tsx.snap
@@ -368,7 +368,7 @@ exports[`EuiRange props loading should display when showInput="inputWithPopover"
             value="8"
           />
           <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
           >
             <span
               aria-label="Loading"
diff --git a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
index 4c0517e62bf..c41cc8728c0 100644
--- a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
+++ b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`EuiSuperSelect is rendered 1`] = `
             type="button"
           />
           <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
           >
             <span
               class="euiFormControlLayoutCustomIcon"
@@ -71,7 +71,7 @@ exports[`EuiSuperSelect props compressed is rendered 1`] = `
             type="button"
           />
           <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
           >
             <span
               class="euiFormControlLayoutCustomIcon"
@@ -115,7 +115,7 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
             type="button"
           />
           <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
           >
             <span
               class="euiFormControlLayoutCustomIcon"
@@ -259,7 +259,7 @@ exports[`EuiSuperSelect props fullWidth is rendered 1`] = `
             type="button"
           />
           <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
           >
             <span
               class="euiFormControlLayoutCustomIcon"
@@ -309,7 +309,7 @@ exports[`EuiSuperSelect props is rendered with a prepend and append 1`] = `
             type="button"
           />
           <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
           >
             <span
               class="euiFormControlLayoutCustomIcon"
@@ -360,7 +360,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
             Option #1
           </button>
           <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
           >
             <span
               class="euiFormControlLayoutCustomIcon"
@@ -506,7 +506,7 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
             type="button"
           />
           <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
           >
             <span
               class="euiFormControlLayoutCustomIcon"
@@ -651,7 +651,7 @@ exports[`EuiSuperSelect props renders popoverProps on the underlying EuiPopover
             Option #2
           </button>
           <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
           >
             <span
               class="euiFormControlLayoutCustomIcon"
@@ -794,7 +794,7 @@ exports[`EuiSuperSelect props select component is rendered 1`] = `
             type="button"
           />
           <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
           >
             <span
               class="euiFormControlLayoutCustomIcon"
@@ -839,7 +839,7 @@ exports[`EuiSuperSelect props valueSelected is rendered 1`] = `
             Option #2
           </button>
           <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
           >
             <span
               class="euiFormControlLayoutCustomIcon"
diff --git a/src/components/form/super_select/__snapshots__/super_select_control.test.tsx.snap b/src/components/form/super_select/__snapshots__/super_select_control.test.tsx.snap
index 93968ce6bc0..51d7a57506a 100644
--- a/src/components/form/super_select/__snapshots__/super_select_control.test.tsx.snap
+++ b/src/components/form/super_select/__snapshots__/super_select_control.test.tsx.snap
@@ -20,7 +20,7 @@ Array [
         type="button"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
       >
         <span
           class="euiFormControlLayoutCustomIcon"
@@ -55,7 +55,7 @@ Array [
         type="button"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
       >
         <span
           class="euiFormControlLayoutCustomIcon"
@@ -90,7 +90,7 @@ Array [
         type="button"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
       >
         <span
           class="euiFormControlLayoutCustomIcon"
@@ -125,7 +125,7 @@ Array [
         type="button"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
       >
         <span
           class="euiFormControlLayoutCustomIcon"
@@ -160,7 +160,7 @@ Array [
         type="button"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
       >
         <span
           class="euiFormControlLayoutCustomIcon"
@@ -195,7 +195,7 @@ Array [
         type="button"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
       >
         <span
           color="danger"
@@ -234,7 +234,7 @@ Array [
         type="button"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
       >
         <span
           aria-label="Loading"
@@ -280,7 +280,7 @@ Array [
         </span>
       </button>
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
       >
         <span
           class="euiFormControlLayoutCustomIcon"
@@ -317,7 +317,7 @@ Array [
         Option #1
       </button>
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
       >
         <span
           class="euiFormControlLayoutCustomIcon"
diff --git a/src/components/form/validatable_control/__snapshots__/validatable_control.test.tsx.snap b/src/components/form/validatable_control/__snapshots__/validatable_control.test.tsx.snap
deleted file mode 100644
index e7d4404985b..00000000000
--- a/src/components/form/validatable_control/__snapshots__/validatable_control.test.tsx.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EuiValidatableControl is rendered 1`] = `<input />`;
diff --git a/src/components/form/validatable_control/validatable_control.test.tsx b/src/components/form/validatable_control/validatable_control.test.tsx
index 0c1972d461c..f5057a8d98c 100644
--- a/src/components/form/validatable_control/validatable_control.test.tsx
+++ b/src/components/form/validatable_control/validatable_control.test.tsx
@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { render, mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
 
 import {
@@ -17,23 +17,33 @@ import {
 
 describe('EuiValidatableControl', () => {
   test('is rendered', () => {
-    const component = render(
-      <EuiValidatableControl>
+    const { container, rerender } = render(
+      <EuiValidatableControl isInvalid>
         <input />
       </EuiValidatableControl>
     );
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <input
+        aria-invalid="true"
+      />
+    `);
 
-    expect(component).toMatchSnapshot();
+    rerender(
+      <EuiValidatableControl>
+        <input />
+      </EuiValidatableControl>
+    );
+    expect(container.firstChild).toMatchInlineSnapshot('<input />');
   });
 
   test('aria-invalid allows falling back to prop set on the child input', () => {
-    const component = render(
+    const { container } = render(
       <EuiValidatableControl>
         <input aria-invalid={true} />
       </EuiValidatableControl>
     );
 
-    expect(component).toMatchInlineSnapshot(`
+    expect(container.firstChild).toMatchInlineSnapshot(`
       <input
         aria-invalid="true"
       />
@@ -44,7 +54,7 @@ describe('EuiValidatableControl', () => {
     it('calls a ref function', () => {
       const ref = jest.fn();
 
-      mount(
+      render(
         <EuiValidatableControl>
           <input id="testInput" ref={ref} />
         </EuiValidatableControl>
@@ -59,7 +69,7 @@ describe('EuiValidatableControl', () => {
     it('sets a ref object\'s "current" property', () => {
       const ref = React.createRef<HTMLInputElement>();
 
-      mount(
+      render(
         <EuiValidatableControl>
           <input id="testInput" ref={ref} />
         </EuiValidatableControl>
@@ -78,13 +88,13 @@ describe('EuiValidatableControl', () => {
         </EuiValidatableControl>
       );
 
-      const wrapper = mount(<Component />);
+      const { rerender } = render(<Component />);
 
       expect(ref).toHaveBeenCalledTimes(1);
       expect(ref.mock.calls[0][0].getAttribute('id')).toBe('testInput');
 
       // Force re-render
-      wrapper.setProps({});
+      rerender(<Component />);
 
       expect(ref).toHaveBeenCalledTimes(1);
       expect(ref.mock.calls[0][0].getAttribute('id')).toBe('testInput');
@@ -99,13 +109,13 @@ describe('EuiValidatableControl', () => {
         </EuiValidatableControl>
       );
 
-      const wrapper = mount(<Component />);
+      const { rerender } = render(<Component />);
 
       expect(ref).toHaveBeenCalledTimes(1);
       expect(ref.mock.calls[0][0].getAttribute('id')).toBe('testInput');
 
       // Force re-render
-      wrapper.setProps({});
+      rerender(<Component />);
 
       expect(ref).toHaveBeenCalledTimes(3);
 
@@ -126,12 +136,12 @@ describe('EuiValidatableControl', () => {
         </EuiValidatableControl>
       );
 
-      const wrapper = mount(<Component change={false} />);
+      const { rerender } = render(<Component change={false} />);
 
       expect(ref).toHaveBeenCalledTimes(1);
       expect(ref.mock.calls[0][0].getAttribute('id')).toBe('testInput');
 
-      wrapper.setProps({ change: true });
+      rerender(<Component change={true} />);
 
       expect(ref).toHaveBeenCalledTimes(3);
 
@@ -155,14 +165,14 @@ describe('EuiValidatableControl', () => {
         </EuiValidatableControl>
       );
 
-      const wrapper = mount(<Component change={false} />);
+      const { rerender } = render(<Component change={false} />);
 
       expect(ref.current).not.toBeNull();
       expect(ref.current!.getAttribute('id')).toBe('testInput');
 
       const prevRef = ref.current;
 
-      wrapper.setProps({ change: true });
+      rerender(<Component change={true} />);
 
       expect(ref.current).not.toBeNull();
       expect(ref.current!.getAttribute('id')).toBe('testInput2');
diff --git a/src/components/form/validatable_control/validatable_control.tsx b/src/components/form/validatable_control/validatable_control.tsx
index 1ae8932911f..748060441c3 100644
--- a/src/components/form/validatable_control/validatable_control.tsx
+++ b/src/components/form/validatable_control/validatable_control.tsx
@@ -13,7 +13,7 @@ import {
   ReactElement,
   Ref,
   FunctionComponent,
-  useRef,
+  useState,
   useEffect,
   useCallback,
 } from 'react';
@@ -45,14 +45,17 @@ export interface EuiValidatableControlProps {
 export const EuiValidatableControl: FunctionComponent<
   CommonProps & EuiValidatableControlProps
 > = ({ isInvalid, children }) => {
-  const control = useRef<HTMLConstraintValidityElement | null>(null);
+  // Note that this must be state and not a ref to cause a rerender/set invalid state on initial mount
+  const [control, setControl] = useState<HTMLConstraintValidityElement | null>(
+    null
+  );
 
   const child = Children.only(children);
   const childRef = child.ref;
 
   const replacedRef = useCallback(
     (element: HTMLConstraintValidityElement) => {
-      control.current = element;
+      setControl(element);
 
       // Call the original ref, if any
       if (typeof childRef === 'function') {
@@ -64,7 +67,7 @@ export const EuiValidatableControl: FunctionComponent<
     [childRef]
   );
 
-  useSetControlValidity({ controlEl: control.current, isInvalid });
+  useSetControlValidity({ controlEl: control, isInvalid });
 
   return cloneElement(child, {
     ref: replacedRef,
diff --git a/src/components/selectable/__snapshots__/selectable.test.tsx.snap b/src/components/selectable/__snapshots__/selectable.test.tsx.snap
index b479fc9dfdd..313ac05e8c1 100644
--- a/src/components/selectable/__snapshots__/selectable.test.tsx.snap
+++ b/src/components/selectable/__snapshots__/selectable.test.tsx.snap
@@ -2586,35 +2586,13 @@ exports[`EuiSelectable screen reader instructions sets custom accessibility inst
               <div
                 className="euiFormControlLayout__childrenWrapper"
               >
-                <EuiValidatableControl>
-                  <input
-                    aria-activedescendant=""
-                    aria-describedby="generated-id_instructions"
-                    aria-haspopup="listbox"
-                    aria-label="Filter options"
-                    autoComplete="off"
-                    className="euiFieldSearch euiFormControlLayout--1icons euiFieldSearch--fullWidth euiFieldSearch-isClearable euiSelectableSearch"
-                    data-test-subj="searchInput"
-                    onChange={[Function]}
-                    onKeyUp={[Function]}
-                    placeholder="Filter options"
-                    type="search"
-                    value="Enceladus"
-                  />
-                </EuiValidatableControl>
                 <EuiFormControlLayoutIcons
-                  clear={
-                    Object {
-                      "data-test-subj": "clearSearchButton",
-                      "onClick": [Function],
-                    }
-                  }
                   compressed={false}
                   icon="search"
-                  isLoading={false}
+                  side="left"
                 >
                   <div
-                    className="euiFormControlLayoutIcons"
+                    className="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
                   >
                     <EuiFormControlLayoutCustomIcon
                       size="m"
@@ -2639,8 +2617,36 @@ exports[`EuiSelectable screen reader instructions sets custom accessibility inst
                       </span>
                     </EuiFormControlLayoutCustomIcon>
                   </div>
+                </EuiFormControlLayoutIcons>
+                <EuiValidatableControl>
+                  <input
+                    aria-activedescendant=""
+                    aria-describedby="generated-id_instructions"
+                    aria-haspopup="listbox"
+                    aria-label="Filter options"
+                    autoComplete="off"
+                    className="euiFieldSearch euiFormControlLayout--1icons euiFieldSearch--fullWidth euiFieldSearch-isClearable euiSelectableSearch"
+                    data-test-subj="searchInput"
+                    onChange={[Function]}
+                    onKeyUp={[Function]}
+                    placeholder="Filter options"
+                    type="search"
+                    value="Enceladus"
+                  />
+                </EuiValidatableControl>
+                <EuiFormControlLayoutIcons
+                  clear={
+                    Object {
+                      "data-test-subj": "clearSearchButton",
+                      "onClick": [Function],
+                    }
+                  }
+                  compressed={false}
+                  isLoading={false}
+                  side="right"
+                >
                   <div
-                    className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                    className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
                   >
                     <EuiFormControlLayoutClearButton
                       data-test-subj="clearSearchButton"
@@ -3702,20 +3708,8 @@ exports[`EuiSelectable search value supports inheriting initialSearchValue from
     <div
       class="euiFormControlLayout__childrenWrapper"
     >
-      <input
-        aria-activedescendant=""
-        aria-describedby="generated-id_instructions"
-        aria-haspopup="listbox"
-        aria-label="Filter options"
-        autocomplete="off"
-        class="euiFieldSearch euiFormControlLayout--1icons euiFieldSearch--fullWidth euiFieldSearch-isClearable euiSelectableSearch"
-        data-test-subj="searchInput"
-        placeholder="Filter options"
-        type="search"
-        value="default value"
-      />
       <div
-        class="euiFormControlLayoutIcons"
+        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
       >
         <span
           class="euiFormControlLayoutCustomIcon"
@@ -3727,8 +3721,20 @@ exports[`EuiSelectable search value supports inheriting initialSearchValue from
           />
         </span>
       </div>
+      <input
+        aria-activedescendant=""
+        aria-describedby="generated-id_instructions"
+        aria-haspopup="listbox"
+        aria-label="Filter options"
+        autocomplete="off"
+        class="euiFieldSearch euiFormControlLayout--1icons euiFieldSearch--fullWidth euiFieldSearch-isClearable euiSelectableSearch"
+        data-test-subj="searchInput"
+        placeholder="Filter options"
+        type="search"
+        value="default value"
+      />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
       >
         <button
           aria-label="Clear input"
diff --git a/src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap b/src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap
index 5a98c4ed8ae..00fe9bb2232 100644
--- a/src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap
+++ b/src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap
@@ -7,17 +7,8 @@ exports[`EuiSelectableSearch is rendered 1`] = `
   <div
     class="euiFormControlLayout__childrenWrapper"
   >
-    <input
-      aria-haspopup="listbox"
-      aria-label="aria-label"
-      autocomplete="off"
-      class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch testClass1 testClass2"
-      data-test-subj="test subject string"
-      type="search"
-      value=""
-    />
     <div
-      class="euiFormControlLayoutIcons"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
     >
       <span
         class="euiFormControlLayoutCustomIcon"
@@ -29,6 +20,15 @@ exports[`EuiSelectableSearch is rendered 1`] = `
         />
       </span>
     </div>
+    <input
+      aria-haspopup="listbox"
+      aria-label="aria-label"
+      autocomplete="off"
+      class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch testClass1 testClass2"
+      data-test-subj="test subject string"
+      type="search"
+      value=""
+    />
   </div>
 </div>
 `;
@@ -40,6 +40,19 @@ exports[`EuiSelectableSearch renders aria props if a listId is present 1`] = `
   <div
     class="euiFormControlLayout__childrenWrapper"
   >
+    <div
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+    >
+      <span
+        class="euiFormControlLayoutCustomIcon"
+      >
+        <span
+          aria-hidden="true"
+          class="euiFormControlLayoutCustomIcon__icon"
+          data-euiicon-type="search"
+        />
+      </span>
+    </div>
     <input
       aria-autocomplete="list"
       aria-controls="list"
@@ -54,8 +67,19 @@ exports[`EuiSelectableSearch renders aria props if a listId is present 1`] = `
       type="search"
       value=""
     />
+  </div>
+</div>
+`;
+
+exports[`EuiSelectableSearch renders placeholder, value, name, and other remaining EuiFieldSearch props 1`] = `
+<div
+  class="euiFormControlLayout euiFormControlLayout--fullWidth"
+>
+  <div
+    class="euiFormControlLayout__childrenWrapper"
+  >
     <div
-      class="euiFormControlLayoutIcons"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
     >
       <span
         class="euiFormControlLayoutCustomIcon"
@@ -67,17 +91,6 @@ exports[`EuiSelectableSearch renders aria props if a listId is present 1`] = `
         />
       </span>
     </div>
-  </div>
-</div>
-`;
-
-exports[`EuiSelectableSearch renders placeholder, value, name, and other remaining EuiFieldSearch props 1`] = `
-<div
-  class="euiFormControlLayout euiFormControlLayout--fullWidth"
->
-  <div
-    class="euiFormControlLayout__childrenWrapper"
-  >
     <input
       aria-haspopup="listbox"
       aria-label="aria-label"
@@ -91,20 +104,7 @@ exports[`EuiSelectableSearch renders placeholder, value, name, and other remaini
       value="typed"
     />
     <div
-      class="euiFormControlLayoutIcons"
-    >
-      <span
-        class="euiFormControlLayoutCustomIcon"
-      >
-        <span
-          aria-hidden="true"
-          class="euiFormControlLayoutCustomIcon__icon"
-          data-euiicon-type="search"
-        />
-      </span>
-    </div>
-    <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
     >
       <button
         aria-label="Clear input"
diff --git a/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap b/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap
index 303bffee17a..127042a0cd2 100644
--- a/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap
+++ b/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap
@@ -17,19 +17,8 @@ exports[`EuiSelectableTemplateSitewide is rendered 1`] = `
         <div
           class="euiFormControlLayout__childrenWrapper"
         >
-          <input
-            aria-activedescendant=""
-            aria-describedby="generated-id_instructions"
-            aria-haspopup="listbox"
-            aria-label="aria-label"
-            autocomplete="off"
-            class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search"
-            placeholder="Search for anything..."
-            type="search"
-            value=""
-          />
           <div
-            class="euiFormControlLayoutIcons"
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
           >
             <span
               class="euiFormControlLayoutCustomIcon"
@@ -41,6 +30,17 @@ exports[`EuiSelectableTemplateSitewide is rendered 1`] = `
               />
             </span>
           </div>
+          <input
+            aria-activedescendant=""
+            aria-describedby="generated-id_instructions"
+            aria-haspopup="listbox"
+            aria-label="aria-label"
+            autocomplete="off"
+            class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search"
+            placeholder="Search for anything..."
+            type="search"
+            value=""
+          />
         </div>
       </div>
       <p
@@ -70,19 +70,8 @@ exports[`EuiSelectableTemplateSitewide props popoverButton is not rendered with
         <div
           class="euiFormControlLayout__childrenWrapper"
         >
-          <input
-            aria-activedescendant=""
-            aria-describedby="generated-id_instructions"
-            aria-haspopup="listbox"
-            aria-label="Filter options"
-            autocomplete="off"
-            class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search"
-            placeholder="Search for anything..."
-            type="search"
-            value=""
-          />
           <div
-            class="euiFormControlLayoutIcons"
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
           >
             <span
               class="euiFormControlLayoutCustomIcon"
@@ -94,6 +83,17 @@ exports[`EuiSelectableTemplateSitewide props popoverButton is not rendered with
               />
             </span>
           </div>
+          <input
+            aria-activedescendant=""
+            aria-describedby="generated-id_instructions"
+            aria-haspopup="listbox"
+            aria-label="Filter options"
+            autocomplete="off"
+            class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search"
+            placeholder="Search for anything..."
+            type="search"
+            value=""
+          />
         </div>
       </div>
       <p
@@ -159,19 +159,8 @@ exports[`EuiSelectableTemplateSitewide props popoverFooter is rendered 1`] = `
         <div
           class="euiFormControlLayout__childrenWrapper"
         >
-          <input
-            aria-activedescendant=""
-            aria-describedby="generated-id_instructions"
-            aria-haspopup="listbox"
-            aria-label="Filter options"
-            autocomplete="off"
-            class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search"
-            placeholder="Search for anything..."
-            type="search"
-            value=""
-          />
           <div
-            class="euiFormControlLayoutIcons"
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
           >
             <span
               class="euiFormControlLayoutCustomIcon"
@@ -183,6 +172,17 @@ exports[`EuiSelectableTemplateSitewide props popoverFooter is rendered 1`] = `
               />
             </span>
           </div>
+          <input
+            aria-activedescendant=""
+            aria-describedby="generated-id_instructions"
+            aria-haspopup="listbox"
+            aria-label="Filter options"
+            autocomplete="off"
+            class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search"
+            placeholder="Search for anything..."
+            type="search"
+            value=""
+          />
         </div>
       </div>
       <p
@@ -212,19 +212,8 @@ exports[`EuiSelectableTemplateSitewide props popoverProps is rendered 1`] = `
         <div
           class="euiFormControlLayout__childrenWrapper"
         >
-          <input
-            aria-activedescendant=""
-            aria-describedby="generated-id_instructions"
-            aria-haspopup="listbox"
-            aria-label="Filter options"
-            autocomplete="off"
-            class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search"
-            placeholder="Search for anything..."
-            type="search"
-            value=""
-          />
           <div
-            class="euiFormControlLayoutIcons"
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
           >
             <span
               class="euiFormControlLayoutCustomIcon"
@@ -236,6 +225,17 @@ exports[`EuiSelectableTemplateSitewide props popoverProps is rendered 1`] = `
               />
             </span>
           </div>
+          <input
+            aria-activedescendant=""
+            aria-describedby="generated-id_instructions"
+            aria-haspopup="listbox"
+            aria-label="Filter options"
+            autocomplete="off"
+            class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search"
+            placeholder="Search for anything..."
+            type="search"
+            value=""
+          />
         </div>
       </div>
       <p
@@ -265,19 +265,8 @@ exports[`EuiSelectableTemplateSitewide props popoverTitle is rendered 1`] = `
         <div
           class="euiFormControlLayout__childrenWrapper"
         >
-          <input
-            aria-activedescendant=""
-            aria-describedby="generated-id_instructions"
-            aria-haspopup="listbox"
-            aria-label="Filter options"
-            autocomplete="off"
-            class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search"
-            placeholder="Search for anything..."
-            type="search"
-            value=""
-          />
           <div
-            class="euiFormControlLayoutIcons"
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
           >
             <span
               class="euiFormControlLayoutCustomIcon"
@@ -289,6 +278,17 @@ exports[`EuiSelectableTemplateSitewide props popoverTitle is rendered 1`] = `
               />
             </span>
           </div>
+          <input
+            aria-activedescendant=""
+            aria-describedby="generated-id_instructions"
+            aria-haspopup="listbox"
+            aria-label="Filter options"
+            autocomplete="off"
+            class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search"
+            placeholder="Search for anything..."
+            type="search"
+            value=""
+          />
         </div>
       </div>
       <p
diff --git a/src/components/suggest/__snapshots__/suggest.test.tsx.snap b/src/components/suggest/__snapshots__/suggest.test.tsx.snap
index 438767f37ce..dd8bd5305cf 100644
--- a/src/components/suggest/__snapshots__/suggest.test.tsx.snap
+++ b/src/components/suggest/__snapshots__/suggest.test.tsx.snap
@@ -17,20 +17,8 @@ exports[`EuiSuggest is rendered 1`] = `
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
-            <input
-              aria-activedescendant=""
-              aria-describedby="generated-id_instructions"
-              aria-haspopup="listbox"
-              aria-label="aria-label"
-              autocomplete="off"
-              class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch testClass1 testClass2"
-              data-test-subj="test subject string"
-              placeholder="Filter options"
-              type="search"
-              value=""
-            />
             <div
-              class="euiFormControlLayoutIcons"
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
             >
               <span
                 class="euiFormControlLayoutCustomIcon"
@@ -42,6 +30,18 @@ exports[`EuiSuggest is rendered 1`] = `
                 />
               </span>
             </div>
+            <input
+              aria-activedescendant=""
+              aria-describedby="generated-id_instructions"
+              aria-haspopup="listbox"
+              aria-label="aria-label"
+              autocomplete="off"
+              class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch testClass1 testClass2"
+              data-test-subj="test subject string"
+              placeholder="Filter options"
+              type="search"
+              value=""
+            />
           </div>
         </div>
         <p
@@ -73,20 +73,8 @@ exports[`EuiSuggest props append 1`] = `
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
-            <input
-              aria-activedescendant=""
-              aria-describedby="generated-id_instructions"
-              aria-haspopup="listbox"
-              aria-label="aria-label"
-              autocomplete="off"
-              class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--inGroup euiSelectableSearch testClass1 testClass2"
-              data-test-subj="test subject string"
-              placeholder="Filter options"
-              type="search"
-              value=""
-            />
             <div
-              class="euiFormControlLayoutIcons"
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
             >
               <span
                 class="euiFormControlLayoutCustomIcon"
@@ -98,6 +86,18 @@ exports[`EuiSuggest props append 1`] = `
                 />
               </span>
             </div>
+            <input
+              aria-activedescendant=""
+              aria-describedby="generated-id_instructions"
+              aria-haspopup="listbox"
+              aria-label="aria-label"
+              autocomplete="off"
+              class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--inGroup euiSelectableSearch testClass1 testClass2"
+              data-test-subj="test subject string"
+              placeholder="Filter options"
+              type="search"
+              value=""
+            />
           </div>
           <span
             class="euiFormControlLayout__append"
@@ -134,20 +134,8 @@ exports[`EuiSuggest props isVirtualized 1`] = `
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
-            <input
-              aria-activedescendant=""
-              aria-describedby="generated-id_instructions"
-              aria-haspopup="listbox"
-              aria-label="aria-label"
-              autocomplete="off"
-              class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch testClass1 testClass2"
-              data-test-subj="test subject string"
-              placeholder="Filter options"
-              type="search"
-              value=""
-            />
             <div
-              class="euiFormControlLayoutIcons"
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
             >
               <span
                 class="euiFormControlLayoutCustomIcon"
@@ -159,6 +147,18 @@ exports[`EuiSuggest props isVirtualized 1`] = `
                 />
               </span>
             </div>
+            <input
+              aria-activedescendant=""
+              aria-describedby="generated-id_instructions"
+              aria-haspopup="listbox"
+              aria-label="aria-label"
+              autocomplete="off"
+              class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch testClass1 testClass2"
+              data-test-subj="test subject string"
+              placeholder="Filter options"
+              type="search"
+              value=""
+            />
           </div>
         </div>
         <p
@@ -190,20 +190,8 @@ exports[`EuiSuggest props maxHeight 1`] = `
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
-            <input
-              aria-activedescendant=""
-              aria-describedby="generated-id_instructions"
-              aria-haspopup="listbox"
-              aria-label="aria-label"
-              autocomplete="off"
-              class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch testClass1 testClass2"
-              data-test-subj="test subject string"
-              placeholder="Filter options"
-              type="search"
-              value=""
-            />
             <div
-              class="euiFormControlLayoutIcons"
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
             >
               <span
                 class="euiFormControlLayoutCustomIcon"
@@ -215,6 +203,18 @@ exports[`EuiSuggest props maxHeight 1`] = `
                 />
               </span>
             </div>
+            <input
+              aria-activedescendant=""
+              aria-describedby="generated-id_instructions"
+              aria-haspopup="listbox"
+              aria-label="aria-label"
+              autocomplete="off"
+              class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch testClass1 testClass2"
+              data-test-subj="test subject string"
+              placeholder="Filter options"
+              type="search"
+              value=""
+            />
           </div>
         </div>
         <p
@@ -246,20 +246,8 @@ exports[`EuiSuggest props options common 1`] = `
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
-            <input
-              aria-activedescendant=""
-              aria-describedby="generated-id_instructions"
-              aria-haspopup="listbox"
-              aria-label="aria-label"
-              autocomplete="off"
-              class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch testClass1 testClass2"
-              data-test-subj="test subject string"
-              placeholder="Filter options"
-              type="search"
-              value=""
-            />
             <div
-              class="euiFormControlLayoutIcons"
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
             >
               <span
                 class="euiFormControlLayoutCustomIcon"
@@ -271,6 +259,18 @@ exports[`EuiSuggest props options common 1`] = `
                 />
               </span>
             </div>
+            <input
+              aria-activedescendant=""
+              aria-describedby="generated-id_instructions"
+              aria-haspopup="listbox"
+              aria-label="aria-label"
+              autocomplete="off"
+              class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch testClass1 testClass2"
+              data-test-subj="test subject string"
+              placeholder="Filter options"
+              type="search"
+              value=""
+            />
           </div>
         </div>
         <p
@@ -302,20 +302,8 @@ exports[`EuiSuggest props options standard 1`] = `
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
-            <input
-              aria-activedescendant=""
-              aria-describedby="generated-id_instructions"
-              aria-haspopup="listbox"
-              aria-label="aria-label"
-              autocomplete="off"
-              class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch testClass1 testClass2"
-              data-test-subj="test subject string"
-              placeholder="Filter options"
-              type="search"
-              value=""
-            />
             <div
-              class="euiFormControlLayoutIcons"
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
             >
               <span
                 class="euiFormControlLayoutCustomIcon"
@@ -327,6 +315,18 @@ exports[`EuiSuggest props options standard 1`] = `
                 />
               </span>
             </div>
+            <input
+              aria-activedescendant=""
+              aria-describedby="generated-id_instructions"
+              aria-haspopup="listbox"
+              aria-label="aria-label"
+              autocomplete="off"
+              class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch testClass1 testClass2"
+              data-test-subj="test subject string"
+              placeholder="Filter options"
+              type="search"
+              value=""
+            />
           </div>
         </div>
         <p
@@ -358,6 +358,19 @@ exports[`EuiSuggest props remaining EuiFieldSearch props are spread to the searc
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
+            <div
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+            >
+              <span
+                class="euiFormControlLayoutCustomIcon"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiFormControlLayoutCustomIcon__icon"
+                  data-euiicon-type="search"
+                />
+              </span>
+            </div>
             <input
               aria-activedescendant=""
               aria-describedby="generated-id_instructions"
@@ -374,20 +387,7 @@ exports[`EuiSuggest props remaining EuiFieldSearch props are spread to the searc
               value="Controlled value"
             />
             <div
-              class="euiFormControlLayoutIcons"
-            >
-              <span
-                class="euiFormControlLayoutCustomIcon"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiFormControlLayoutCustomIcon__icon"
-                  data-euiicon-type="search"
-                />
-              </span>
-            </div>
-            <div
-              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
             >
               <button
                 aria-label="Clear input"
@@ -436,20 +436,8 @@ exports[`EuiSuggest props status status: loading is rendered 1`] = `
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
-            <input
-              aria-activedescendant=""
-              aria-describedby="generated-id_instructions"
-              aria-haspopup="listbox"
-              aria-label="aria-label"
-              autocomplete="off"
-              class="euiFieldSearch euiFormControlLayout--1icons euiFieldSearch--fullWidth euiFieldSearch-isLoading euiSelectableSearch testClass1 testClass2"
-              data-test-subj="test subject string"
-              placeholder="Filter options"
-              type="search"
-              value=""
-            />
             <div
-              class="euiFormControlLayoutIcons"
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
             >
               <span
                 class="euiFormControlLayoutCustomIcon"
@@ -461,8 +449,20 @@ exports[`EuiSuggest props status status: loading is rendered 1`] = `
                 />
               </span>
             </div>
+            <input
+              aria-activedescendant=""
+              aria-describedby="generated-id_instructions"
+              aria-haspopup="listbox"
+              aria-label="aria-label"
+              autocomplete="off"
+              class="euiFieldSearch euiFormControlLayout--1icons euiFieldSearch--fullWidth euiFieldSearch-isLoading euiSelectableSearch testClass1 testClass2"
+              data-test-subj="test subject string"
+              placeholder="Filter options"
+              type="search"
+              value=""
+            />
             <div
-              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
             >
               <span
                 aria-label="Loading"
@@ -501,20 +501,8 @@ exports[`EuiSuggest props status status: saved is rendered 1`] = `
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
-            <input
-              aria-activedescendant=""
-              aria-describedby="generated-id_instructions"
-              aria-haspopup="listbox"
-              aria-label="aria-label"
-              autocomplete="off"
-              class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--inGroup euiSelectableSearch testClass1 testClass2"
-              data-test-subj="test subject string"
-              placeholder="Filter options"
-              type="search"
-              value=""
-            />
             <div
-              class="euiFormControlLayoutIcons"
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
             >
               <span
                 class="euiFormControlLayoutCustomIcon"
@@ -526,6 +514,18 @@ exports[`EuiSuggest props status status: saved is rendered 1`] = `
                 />
               </span>
             </div>
+            <input
+              aria-activedescendant=""
+              aria-describedby="generated-id_instructions"
+              aria-haspopup="listbox"
+              aria-label="aria-label"
+              autocomplete="off"
+              class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--inGroup euiSelectableSearch testClass1 testClass2"
+              data-test-subj="test subject string"
+              placeholder="Filter options"
+              type="search"
+              value=""
+            />
           </div>
           <span
             class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
@@ -566,20 +566,8 @@ exports[`EuiSuggest props status status: unchanged is rendered 1`] = `
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
-            <input
-              aria-activedescendant=""
-              aria-describedby="generated-id_instructions"
-              aria-haspopup="listbox"
-              aria-label="aria-label"
-              autocomplete="off"
-              class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch testClass1 testClass2"
-              data-test-subj="test subject string"
-              placeholder="Filter options"
-              type="search"
-              value=""
-            />
             <div
-              class="euiFormControlLayoutIcons"
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
             >
               <span
                 class="euiFormControlLayoutCustomIcon"
@@ -591,6 +579,18 @@ exports[`EuiSuggest props status status: unchanged is rendered 1`] = `
                 />
               </span>
             </div>
+            <input
+              aria-activedescendant=""
+              aria-describedby="generated-id_instructions"
+              aria-haspopup="listbox"
+              aria-label="aria-label"
+              autocomplete="off"
+              class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch testClass1 testClass2"
+              data-test-subj="test subject string"
+              placeholder="Filter options"
+              type="search"
+              value=""
+            />
           </div>
         </div>
         <p
@@ -622,20 +622,8 @@ exports[`EuiSuggest props status status: unsaved is rendered 1`] = `
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
-            <input
-              aria-activedescendant=""
-              aria-describedby="generated-id_instructions"
-              aria-haspopup="listbox"
-              aria-label="aria-label"
-              autocomplete="off"
-              class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--inGroup euiSelectableSearch testClass1 testClass2"
-              data-test-subj="test subject string"
-              placeholder="Filter options"
-              type="search"
-              value=""
-            />
             <div
-              class="euiFormControlLayoutIcons"
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
             >
               <span
                 class="euiFormControlLayoutCustomIcon"
@@ -647,6 +635,18 @@ exports[`EuiSuggest props status status: unsaved is rendered 1`] = `
                 />
               </span>
             </div>
+            <input
+              aria-activedescendant=""
+              aria-describedby="generated-id_instructions"
+              aria-haspopup="listbox"
+              aria-label="aria-label"
+              autocomplete="off"
+              class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--inGroup euiSelectableSearch testClass1 testClass2"
+              data-test-subj="test subject string"
+              placeholder="Filter options"
+              type="search"
+              value=""
+            />
           </div>
           <span
             class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
@@ -687,20 +687,8 @@ exports[`EuiSuggest props tooltipContent tooltipContent for status: loading is r
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
-            <input
-              aria-activedescendant=""
-              aria-describedby="generated-id_instructions"
-              aria-haspopup="listbox"
-              aria-label="aria-label"
-              autocomplete="off"
-              class="euiFieldSearch euiFormControlLayout--1icons euiFieldSearch--fullWidth euiFieldSearch-isLoading euiSelectableSearch testClass1 testClass2"
-              data-test-subj="test subject string"
-              placeholder="Filter options"
-              type="search"
-              value=""
-            />
             <div
-              class="euiFormControlLayoutIcons"
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
             >
               <span
                 class="euiFormControlLayoutCustomIcon"
@@ -712,8 +700,20 @@ exports[`EuiSuggest props tooltipContent tooltipContent for status: loading is r
                 />
               </span>
             </div>
+            <input
+              aria-activedescendant=""
+              aria-describedby="generated-id_instructions"
+              aria-haspopup="listbox"
+              aria-label="aria-label"
+              autocomplete="off"
+              class="euiFieldSearch euiFormControlLayout--1icons euiFieldSearch--fullWidth euiFieldSearch-isLoading euiSelectableSearch testClass1 testClass2"
+              data-test-subj="test subject string"
+              placeholder="Filter options"
+              type="search"
+              value=""
+            />
             <div
-              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
             >
               <span
                 aria-label="Loading"
@@ -752,20 +752,8 @@ exports[`EuiSuggest props tooltipContent tooltipContent for status: saved is ren
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
-            <input
-              aria-activedescendant=""
-              aria-describedby="generated-id_instructions"
-              aria-haspopup="listbox"
-              aria-label="aria-label"
-              autocomplete="off"
-              class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--inGroup euiSelectableSearch testClass1 testClass2"
-              data-test-subj="test subject string"
-              placeholder="Filter options"
-              type="search"
-              value=""
-            />
             <div
-              class="euiFormControlLayoutIcons"
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
             >
               <span
                 class="euiFormControlLayoutCustomIcon"
@@ -777,6 +765,18 @@ exports[`EuiSuggest props tooltipContent tooltipContent for status: saved is ren
                 />
               </span>
             </div>
+            <input
+              aria-activedescendant=""
+              aria-describedby="generated-id_instructions"
+              aria-haspopup="listbox"
+              aria-label="aria-label"
+              autocomplete="off"
+              class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--inGroup euiSelectableSearch testClass1 testClass2"
+              data-test-subj="test subject string"
+              placeholder="Filter options"
+              type="search"
+              value=""
+            />
           </div>
           <span
             class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
@@ -817,20 +817,8 @@ exports[`EuiSuggest props tooltipContent tooltipContent for status: unchanged is
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
-            <input
-              aria-activedescendant=""
-              aria-describedby="generated-id_instructions"
-              aria-haspopup="listbox"
-              aria-label="aria-label"
-              autocomplete="off"
-              class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch testClass1 testClass2"
-              data-test-subj="test subject string"
-              placeholder="Filter options"
-              type="search"
-              value=""
-            />
             <div
-              class="euiFormControlLayoutIcons"
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
             >
               <span
                 class="euiFormControlLayoutCustomIcon"
@@ -842,6 +830,18 @@ exports[`EuiSuggest props tooltipContent tooltipContent for status: unchanged is
                 />
               </span>
             </div>
+            <input
+              aria-activedescendant=""
+              aria-describedby="generated-id_instructions"
+              aria-haspopup="listbox"
+              aria-label="aria-label"
+              autocomplete="off"
+              class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch testClass1 testClass2"
+              data-test-subj="test subject string"
+              placeholder="Filter options"
+              type="search"
+              value=""
+            />
           </div>
         </div>
         <p
@@ -873,20 +873,8 @@ exports[`EuiSuggest props tooltipContent tooltipContent for status: unsaved is r
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
-            <input
-              aria-activedescendant=""
-              aria-describedby="generated-id_instructions"
-              aria-haspopup="listbox"
-              aria-label="aria-label"
-              autocomplete="off"
-              class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--inGroup euiSelectableSearch testClass1 testClass2"
-              data-test-subj="test subject string"
-              placeholder="Filter options"
-              type="search"
-              value=""
-            />
             <div
-              class="euiFormControlLayoutIcons"
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
             >
               <span
                 class="euiFormControlLayoutCustomIcon"
@@ -898,6 +886,18 @@ exports[`EuiSuggest props tooltipContent tooltipContent for status: unsaved is r
                 />
               </span>
             </div>
+            <input
+              aria-activedescendant=""
+              aria-describedby="generated-id_instructions"
+              aria-haspopup="listbox"
+              aria-label="aria-label"
+              autocomplete="off"
+              class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--inGroup euiSelectableSearch testClass1 testClass2"
+              data-test-subj="test subject string"
+              placeholder="Filter options"
+              type="search"
+              value=""
+            />
           </div>
           <span
             class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
diff --git a/src/themes/amsterdam/overrides/_date_picker.scss b/src/themes/amsterdam/overrides/_date_picker.scss
index f12fceeb07b..aebe13a68d4 100644
--- a/src/themes/amsterdam/overrides/_date_picker.scss
+++ b/src/themes/amsterdam/overrides/_date_picker.scss
@@ -8,20 +8,6 @@
   }
 }
 
-.euiDatePickerRange {
-  border-radius: $euiFormControlBorderRadius;
-}
-
 .euiDatePicker.euiDatePicker--shadow.euiDatePicker--inline .react-datepicker {
   border: none;
 }
-
-.euiSuperDatePicker__prettyFormat {
-  border-top-right-radius: $euiFormControlBorderRadius;
-  border-bottom-right-radius: $euiFormControlBorderRadius;
-}
-
-.euiFormControlLayout--compressed.euiSuperDatePicker .euiSuperDatePicker__prettyFormat {
-  border-top-right-radius: $euiFormControlCompressedBorderRadius;
-  border-bottom-right-radius: $euiFormControlCompressedBorderRadius;
-}
diff --git a/src/themes/amsterdam/overrides/_date_popover_button.scss b/src/themes/amsterdam/overrides/_date_popover_button.scss
deleted file mode 100644
index 6b5d91cd27f..00000000000
--- a/src/themes/amsterdam/overrides/_date_popover_button.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.euiDatePopoverButton--start {
-  text-align: center;
-}
-
-.euiDatePopoverButton--end {
-  text-align: center;
-  border-top-right-radius: $euiFormControlBorderRadius;
-  border-bottom-right-radius: $euiFormControlBorderRadius;
-
-  &.euiDatePopoverButton--compressed {
-    border-top-right-radius: $euiFormControlCompressedBorderRadius;
-    border-bottom-right-radius: $euiFormControlCompressedBorderRadius;
-  }
-}
diff --git a/src/themes/amsterdam/overrides/_index.scss b/src/themes/amsterdam/overrides/_index.scss
index f3c16fa9c2f..7fb853f7628 100644
--- a/src/themes/amsterdam/overrides/_index.scss
+++ b/src/themes/amsterdam/overrides/_index.scss
@@ -1,7 +1,6 @@
 @import 'combo_box';
 @import 'data_grid';
 @import 'date_picker';
-@import 'date_popover_button';
 @import 'description_list';
 @import 'filter_group';
 @import 'form_control_layout';
diff --git a/upcoming_changelogs/6705.md b/upcoming_changelogs/6705.md
new file mode 100644
index 00000000000..db8eb385a0a
--- /dev/null
+++ b/upcoming_changelogs/6705.md
@@ -0,0 +1,7 @@
+- Updated `EuiFormControlLayoutIcons` to render left icons in expected DOM order
+- Updated `EuiDatePickerRange`'s `isInvalid` state to match other range inputs
+- Updated `EuiSuperDatePicker`'s `isInvalid` state to match other range inputs
+
+**Bug fixes**
+
+- Fixed `EuiValidatableControl` to correctly display `isInvalid` states on mount