diff --git a/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.scss b/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.scss
index bd1340c454319..b4bafe31b70a1 100644
--- a/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.scss
+++ b/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.scss
@@ -7,6 +7,19 @@
 }
 
 .optionsList--buttonOverride {
+  &:hover:not(:disabled),
+  &:focus:not(:disabled) {
+    // Remove underline from whole button so notifications don't get the underline
+    text-decoration: none;
+  
+    .optionsList--title {
+      // Add put it only on the actual text part
+      text-decoration: underline;
+    }
+  }
+}
+
+.optionsList--buttonOverrideTwoLine {
   height: auto !important;
   width: 100%;
 
@@ -19,16 +32,6 @@
     }
   }
 
-  &:hover:not(:disabled),
-  &:focus:not(:disabled) {
-    // Remove underline from whole button so notifications don't get the underline
-    text-decoration: none;
-
-    .optionsList--title {
-      // Add put it only on the actual text part
-      text-decoration: underline;
-    }
-  }
 }
 
 .optionsList--items {
@@ -40,33 +43,37 @@
   max-width: 100%;
 }
 
-.optionsList--twoLine {
-  flex-direction: column;
-}
-
 .optionsList {
   background-color: $euiFormBackgroundColor;
-  border: 1px solid $euiFormBorderColor;
-  border-radius: $euiBorderRadius;
-  display: flex;
-  align-items: stretch;
-  font-size: $euiFontSizeS;
   width: 100%;
+  height: 100%;
+
+  &.optionsList--twoLine {
+    border: 1px solid $euiFormBorderColor;
+    border-radius: $euiBorderRadius;
+    display: flex;
+    align-items: stretch;
+    font-size: $euiFontSizeS;
+    flex-direction: column;
+
+    .optionsList--control {
+      height: $euiFormControlHeight;
+      flex-direction: row;
+    }
+  }
 
   .optionsList--title {
     background-color: $euiFormBorderColor;
     padding: $euiSizeXS $euiSizeS;
     display: flex;
     align-items: center;
-    font-weight: $euiFontWeightBold;
   }
 
   .optionsList--control {
     flex-grow: 1;
     display: flex;
-    flex-direction: row;
-    height: $euiFormControlHeight;
     align-items: center;
+    height: 100%;
 
     .optionsList--selections {
       flex: 1;
@@ -87,4 +94,25 @@
       padding: $euiSizeXS;
     }
   }
+}
+
+.optionsList--formControlLayout {
+  max-width: unset;
+}
+
+.optionsList--popoverOverride {
+  width: 100%;
+  height: 100%;
+}
+
+.optionsList--buttonOverrideSingle {
+  height: 100%;
+  width: 100%;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  overflow: hidden;
+}
+
+.optionsList--search {
+  padding: $euiSizeS;
 }
\ No newline at end of file
diff --git a/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.tsx b/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.tsx
index f57fded369dd4..12d4b9b4abef3 100644
--- a/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.tsx
+++ b/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.tsx
@@ -15,6 +15,7 @@ import {
   EuiFilterSelectItem,
   EuiPopoverTitle,
   EuiSelectableProps,
+  EuiFormControlLayout,
 } from '@elastic/eui';
 
 import classNames from 'classnames';
@@ -46,7 +47,10 @@ export const OptionsListControl = ({ twoLine, title, options }: OptionsListContr
   const button = (
     <EuiButtonEmpty
       color="text"
-      className="optionsList--buttonOverride"
+      className={classNames('optionsList--buttonOverride', {
+        'optionsList--buttonOverrideTwoLine': twoLine,
+        'optionsList--buttonOverrideSingle': !twoLine,
+      })}
       textProps={{
         className: classNames('optionsList', {
           'optionsList--twoLine': twoLine,
@@ -55,7 +59,7 @@ export const OptionsListControl = ({ twoLine, title, options }: OptionsListContr
       onClick={() => setIsPopoverOpen((open) => !open)}
       contentProps={{ className: 'optionsList--buttonContentOverride' }}
     >
-      <span className="optionsList--title">{startCase(title)}</span>
+      {twoLine ? <span className="optionsList--title">{startCase(title)}</span> : null}
       <span className="optionsList--control">
         <span
           className={classNames('optionsList--selections', {
@@ -82,27 +86,71 @@ export const OptionsListControl = ({ twoLine, title, options }: OptionsListContr
   );
 
   return (
-    <EuiPopover
-      id="popoverExampleMultiSelect"
-      button={button}
-      isOpen={isPopoverOpen}
-      anchorClassName="optionsList--anchorOverride"
-      closePopover={() => setIsPopoverOpen(false)}
-      panelPaddingSize="none"
-      anchorPosition="upLeft"
-      ownFocus
-      repositionOnScroll
-    >
-      <EuiPopoverTitle paddingSize="s">
-        <EuiFieldSearch compressed />
-      </EuiPopoverTitle>
-      <div className="optionsList--items">
-        {selectableOptions.map((item, index) => (
-          <EuiFilterSelectItem checked={item.checked} key={index} onClick={() => updateItem(index)}>
-            {item.label}
-          </EuiFilterSelectItem>
-        ))}
-      </div>
-    </EuiPopover>
+    <>
+      {twoLine ? (
+        <EuiPopover
+          id="popoverExampleMultiSelect"
+          button={button}
+          isOpen={isPopoverOpen}
+          anchorClassName="optionsList--anchorOverride"
+          closePopover={() => setIsPopoverOpen(false)}
+          panelPaddingSize="none"
+          anchorPosition="upLeft"
+          ownFocus
+          repositionOnScroll
+        >
+          <EuiPopoverTitle paddingSize="s">{title}</EuiPopoverTitle>
+          <div className="optionsList--search">
+            <EuiFieldSearch compressed />
+          </div>
+          <div className="optionsList--items">
+            {selectableOptions.map((item, index) => (
+              <EuiFilterSelectItem
+                checked={item.checked}
+                key={index}
+                onClick={() => updateItem(index)}
+              >
+                {item.label}
+              </EuiFilterSelectItem>
+            ))}
+          </div>
+        </EuiPopover>
+      ) : (
+        <EuiFormControlLayout
+          className="optionsList--formControlLayout"
+          prepend={
+            <EuiButtonEmpty color="text" size="s" iconSide="right">
+              {startCase(title)}
+            </EuiButtonEmpty>
+          }
+        >
+          <EuiPopover
+            id="popoverExampleMultiSelect"
+            button={button}
+            className="optionsList--popoverOverride"
+            anchorClassName="optionsList--anchorOverride"
+            isOpen={isPopoverOpen}
+            closePopover={() => setIsPopoverOpen(false)}
+            panelPaddingSize="none"
+          >
+            <EuiPopoverTitle paddingSize="s">{title}</EuiPopoverTitle>
+            <div className="optionsList--search">
+              <EuiFieldSearch compressed />
+            </div>
+            <div className="optionsList--items">
+              {selectableOptions.map((item, index) => (
+                <EuiFilterSelectItem
+                  checked={item.checked}
+                  key={index}
+                  onClick={() => updateItem(index)}
+                >
+                  {item.label}
+                </EuiFilterSelectItem>
+              ))}
+            </div>
+          </EuiPopover>
+        </EuiFormControlLayout>
+      )}
+    </>
   );
 };