diff --git a/src/ui/public/query_bar/_index.scss b/src/ui/public/query_bar/_index.scss
index 81a69fd89db99..b6634debbfa96 100644
--- a/src/ui/public/query_bar/_index.scss
+++ b/src/ui/public/query_bar/_index.scss
@@ -1,4 +1,4 @@
 // SASSTODO: Formalize this color in Kibana's styling constants
 $typeaheadConjunctionColor: #7800A6;
 
-@import 'components/typeahead/index';
\ No newline at end of file
+@import './components/index';
diff --git a/src/ui/public/query_bar/components/_index.scss b/src/ui/public/query_bar/components/_index.scss
new file mode 100644
index 0000000000000..e17c416c13546
--- /dev/null
+++ b/src/ui/public/query_bar/components/_index.scss
@@ -0,0 +1,2 @@
+@import './query_bar';
+@import './typeahead/index';
diff --git a/src/ui/public/query_bar/components/_query_bar.scss b/src/ui/public/query_bar/components/_query_bar.scss
new file mode 100644
index 0000000000000..f104c20daf064
--- /dev/null
+++ b/src/ui/public/query_bar/components/_query_bar.scss
@@ -0,0 +1,14 @@
+@include euiBreakpoint('xs', 's') {
+  .kbnQueryBar--withDatePicker {
+    > :last-child {
+      // EUI Flexbox adds too much margin between responded items, this just moves the last one up
+      margin-top: -$euiSize;
+    }
+  }
+}
+
+@include euiBreakpoint('m', 'l', 'xl') {
+  .kbnQueryBar__datePickerWrapper {
+    max-width: 40vw;
+  }
+}
diff --git a/src/ui/public/query_bar/components/query_bar.tsx b/src/ui/public/query_bar/components/query_bar.tsx
index d8ef72881f422..5455336b0307c 100644
--- a/src/ui/public/query_bar/components/query_bar.tsx
+++ b/src/ui/public/query_bar/components/query_bar.tsx
@@ -19,6 +19,7 @@
 
 import { IndexPattern } from 'ui/index_patterns';
 
+import classNames from 'classnames';
 import { compact, debounce, get, isEqual } from 'lodash';
 import React, { Component } from 'react';
 import { getFromLegacyIndexPattern } from 'ui/index_patterns/static_utils';
@@ -527,8 +528,16 @@ export class QueryBarUI extends Component<Props, State> {
   }
 
   public render() {
+    const classes = classNames('kbnQueryBar', {
+      'kbnQueryBar--withDatePicker': this.props.showDatePicker,
+    });
+
     return (
-      <EuiFlexGroup responsive={false} gutterSize="s">
+      <EuiFlexGroup
+        className={classes}
+        responsive={this.props.showDatePicker ? true : false}
+        gutterSize="s"
+      >
         <EuiFlexItem>
           <EuiOutsideClickDetector onOutsideClick={this.onOutsideClick}>
             {/* position:relative required on container so the suggestions appear under the query bar*/}
@@ -598,18 +607,31 @@ export class QueryBarUI extends Component<Props, State> {
             </div>
           </EuiOutsideClickDetector>
         </EuiFlexItem>
-        {this.renderDatePicker()}
-        <EuiFlexItem grow={false}>
-          <EuiSuperUpdateButton
-            needsUpdate={this.isDirty()}
-            onClick={this.onClickSubmitButton}
-            data-test-subj="querySubmitButton"
-          />
-        </EuiFlexItem>
+        <EuiFlexItem grow={false}>{this.renderUpdateButton()}</EuiFlexItem>
       </EuiFlexGroup>
     );
   }
 
+  private renderUpdateButton() {
+    const button = (
+      <EuiSuperUpdateButton
+        needsUpdate={this.isDirty()}
+        onClick={this.onClickSubmitButton}
+        data-test-subj="querySubmitButton"
+      />
+    );
+    if (this.props.showDatePicker) {
+      return (
+        <EuiFlexGroup responsive={false} gutterSize="s">
+          {this.renderDatePicker()}
+          <EuiFlexItem grow={false}>{button}</EuiFlexItem>
+        </EuiFlexGroup>
+      );
+    } else {
+      return button;
+    }
+  }
+
   private renderDatePicker() {
     if (!this.props.showDatePicker) {
       return null;
@@ -635,7 +657,7 @@ export class QueryBarUI extends Component<Props, State> {
       });
 
     return (
-      <EuiFlexItem grow={false}>
+      <EuiFlexItem className="kbnQueryBar__datePickerWrapper">
         <EuiSuperDatePicker
           start={this.state.from}
           end={this.state.to}