diff --git a/packages/datetime/src/components/date-input/_dateinput.scss b/packages/datetime/src/components/date-input/_dateinput.scss
index 007d79ec69..484040af15 100644
--- a/packages/datetime/src/components/date-input/_dateinput.scss
+++ b/packages/datetime/src/components/date-input/_dateinput.scss
@@ -3,6 +3,9 @@
 
 @import "../../common";
 
-.#{$ns}-dateinput-popover {
-  padding: 0;
+.#{$ns}-date-input {
+  .#{$ns}-input-action {
+    display: flex;
+    flex-direction: row;
+  }
 }
diff --git a/packages/datetime/src/components/date-input/dateInput.tsx b/packages/datetime/src/components/date-input/dateInput.tsx
index 6cc088196a..417170a2b7 100644
--- a/packages/datetime/src/components/date-input/dateInput.tsx
+++ b/packages/datetime/src/components/date-input/dateInput.tsx
@@ -583,8 +583,8 @@ export const DateInput: React.FC<DateInputProps> = React.memo(function _DateInpu
                     placeholder={placeholder}
                     rightElement={
                         <>
-                            {maybeTimezonePicker}
                             {props.rightElement}
+                            {maybeTimezonePicker}
                         </>
                     }
                     tagName={popoverProps.targetTagName}
diff --git a/packages/datetime2/src/components/date-input3/dateInput3.tsx b/packages/datetime2/src/components/date-input3/dateInput3.tsx
index fa04ea0abb..871f1a85c7 100644
--- a/packages/datetime2/src/components/date-input3/dateInput3.tsx
+++ b/packages/datetime2/src/components/date-input3/dateInput3.tsx
@@ -467,8 +467,8 @@ export const DateInput3: React.FC<DateInput3Props> = React.memo(function _DateIn
                     placeholder={placeholder}
                     rightElement={
                         <>
-                            {maybeTimezonePicker}
                             {props.rightElement}
+                            {maybeTimezonePicker}
                         </>
                     }
                     tagName={popoverProps.targetTagName}
diff --git a/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx b/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx
index e1c01a91a5..7b6618f244 100644
--- a/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx
+++ b/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx
@@ -101,9 +101,7 @@ export class DateInputExample extends React.PureComponent<ExampleProps, DateInpu
                     onChange={this.handleDateChange}
                     popoverProps={{ placement: "bottom" }}
                     rightElement={
-                        showRightElement && (
-                            <Icon icon="globe" intent="primary" style={{ padding: 7, marginLeft: -5 }} />
-                        )
+                        showRightElement && <Icon icon="globe" intent="primary" style={{ padding: "7px 5px" }} />
                     }
                     timePickerProps={
                         this.state.timePrecision === undefined
diff --git a/packages/docs-app/src/examples/datetime2-examples/dateInput3Example.tsx b/packages/docs-app/src/examples/datetime2-examples/dateInput3Example.tsx
index 7a2093a20b..90ecedb9c1 100644
--- a/packages/docs-app/src/examples/datetime2-examples/dateInput3Example.tsx
+++ b/packages/docs-app/src/examples/datetime2-examples/dateInput3Example.tsx
@@ -101,9 +101,7 @@ export class DateInput3Example extends React.PureComponent<ExampleProps, DateInp
                     onChange={this.handleDateChange}
                     popoverProps={{ placement: "bottom" }}
                     rightElement={
-                        showRightElement && (
-                            <Icon icon="globe" intent="primary" style={{ padding: 7, marginLeft: -5 }} />
-                        )
+                        showRightElement && <Icon icon="globe" intent="primary" style={{ padding: "7px 5px" }} />
                     }
                     timePickerProps={
                         this.state.timePrecision === undefined