diff --git a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
index 7c71ddf2a3..8f8d0ecea6 100644
--- a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
+++ b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
@@ -46,18 +46,28 @@ const ToolbarGroup = styled(PFToolbarGroup)`
 
 const ColumnLeft = styled.div`
   display: flex;
-  flex-grow: 1;
+  flex-basis: ${props => (props.fillWidth ? 'auto' : '100%')};
+  flex-grow: ${props => (props.fillWidth ? '1' : '0')};
   justify-content: flex-start;
   align-items: center;
   padding: 10px 0 8px 0;
+
+  @media screen and (min-width: 980px) {
+    flex-basis: ${props => (props.fillWidth ? 'auto' : '50%')};
+  }
 `;
 
 const ColumnRight = styled.div`
-  flex-grow: 0;
   display: flex;
+  flex-basis: ${props => (props.fillWidth ? 'auto' : '100%')};
+  flex-grow: 0;
   justify-content: flex-start;
   align-items: center;
-  padding: 10px 0 8px 0;
+  padding: 8px 0 10px 0;
+
+  @media screen and (min-width: 980px) {
+    flex-basis: ${props => (props.fillWidth ? 'auto' : '50%')};
+  }
 `;
 
 const AdditionalControlsWrapper = styled.div`
@@ -94,7 +104,7 @@ class DataListToolbar extends React.Component {
     return (
       <AWXToolbar>
         <Toolbar css={fillWidth ? 'margin-right: 0; margin-left: 0' : ''}>
-          <ColumnLeft>
+          <ColumnLeft fillWidth={fillWidth}>
             {showSelectAll && (
               <Fragment>
                 <ToolbarItem>
@@ -117,7 +127,7 @@ class DataListToolbar extends React.Component {
             </ToolbarItem>
             <VerticalSeparator />
           </ColumnLeft>
-          <ColumnRight>
+          <ColumnRight fillWidth={fillWidth}>
             <ToolbarItem>
               <Sort
                 columns={columns}
diff --git a/awx/ui_next/src/screens/Organization/OrganizationNotifications/__snapshots__/OrganizationNotifications.test.jsx.snap b/awx/ui_next/src/screens/Organization/OrganizationNotifications/__snapshots__/OrganizationNotifications.test.jsx.snap
index c35153ba91..9cabd56bc6 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationNotifications/__snapshots__/OrganizationNotifications.test.jsx.snap
+++ b/awx/ui_next/src/screens/Organization/OrganizationNotifications/__snapshots__/OrganizationNotifications.test.jsx.snap
@@ -478,18 +478,27 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                 _css=""
                                                 className="pf-l-toolbar DataListToolbar__Toolbar-ajzso8-1 sc-htpNat dnOsXG"
                                               >
-                                                <DataListToolbar__ColumnLeft>
+                                                <DataListToolbar__ColumnLeft
+                                                  fillWidth={false}
+                                                >
                                                   <StyledComponent
+                                                    fillWidth={false}
                                                     forwardedComponent={
                                                       Object {
                                                         "$$typeof": Symbol(react.forward_ref),
                                                         "attrs": Array [],
                                                         "componentStyle": ComponentStyle {
                                                           "componentId": "DataListToolbar__ColumnLeft-ajzso8-3",
-                                                          "isStatic": true,
-                                                          "lastClassName": "bpkKMr",
+                                                          "isStatic": false,
+                                                          "lastClassName": "bPvPpR",
                                                           "rules": Array [
-                                                            "display:flex;flex-grow:1;justify-content:flex-start;align-items:center;padding:10px 0 8px 0;",
+                                                            "display:flex;flex-basis:",
+                                                            [Function],
+                                                            ";flex-grow:",
+                                                            [Function],
+                                                            ";justify-content:flex-start;align-items:center;padding:10px 0 8px 0;@media screen and (min-width:980px){flex-basis:",
+                                                            [Function],
+                                                            ";}",
                                                           ],
                                                         },
                                                         "displayName": "DataListToolbar__ColumnLeft",
@@ -505,7 +514,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                     forwardedRef={null}
                                                   >
                                                     <div
-                                                      className="DataListToolbar__ColumnLeft-ajzso8-3 bpkKMr"
+                                                      className="DataListToolbar__ColumnLeft-ajzso8-3 bPvPpR"
                                                     >
                                                       <Styled(ToolbarItem)>
                                                         <StyledComponent
@@ -931,18 +940,25 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                     </div>
                                                   </StyledComponent>
                                                 </DataListToolbar__ColumnLeft>
-                                                <DataListToolbar__ColumnRight>
+                                                <DataListToolbar__ColumnRight
+                                                  fillWidth={false}
+                                                >
                                                   <StyledComponent
+                                                    fillWidth={false}
                                                     forwardedComponent={
                                                       Object {
                                                         "$$typeof": Symbol(react.forward_ref),
                                                         "attrs": Array [],
                                                         "componentStyle": ComponentStyle {
                                                           "componentId": "DataListToolbar__ColumnRight-ajzso8-4",
-                                                          "isStatic": true,
-                                                          "lastClassName": "aHlzn",
+                                                          "isStatic": false,
+                                                          "lastClassName": "gTMHVz",
                                                           "rules": Array [
-                                                            "flex-grow:0;display:flex;justify-content:flex-start;align-items:center;padding:10px 0 8px 0;",
+                                                            "display:flex;flex-basis:",
+                                                            [Function],
+                                                            ";flex-grow:0;justify-content:flex-start;align-items:center;padding:8px 0 10px 0;@media screen and (min-width:980px){flex-basis:",
+                                                            [Function],
+                                                            ";}",
                                                           ],
                                                         },
                                                         "displayName": "DataListToolbar__ColumnRight",
@@ -958,7 +974,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                     forwardedRef={null}
                                                   >
                                                     <div
-                                                      className="DataListToolbar__ColumnRight-ajzso8-4 aHlzn"
+                                                      className="DataListToolbar__ColumnRight-ajzso8-4 gTMHVz"
                                                     >
                                                       <ToolbarItem
                                                         className={null}