diff --git a/ui/src/Components/Labels/FilterInputLabel/index.css b/ui/src/Components/Labels/FilterInputLabel/index.css
index 3de3f2cad..eb22f0467 100644
--- a/ui/src/Components/Labels/FilterInputLabel/index.css
+++ b/ui/src/Components/Labels/FilterInputLabel/index.css
@@ -11,9 +11,12 @@
   margin-bottom: 1px;
 }
 
-.badge.components-filteredinputlabel > .badge {
+.badge.components-filteredinputlabel > .badge,
+.badge.components-filteredinputlabel > svg {
   /* match outer badge font size */
   font-size: 90%;
+  line-height: 100%;
+  padding-bottom: 0.1em;
 
   /* we have badge inside a badge, make the inner one a little brighter
      in case both use same color classes */
@@ -22,5 +25,5 @@
 
 .badge.components-filteredinputlabel > .close {
   /* make close button bigger, to match font size of the badge */
-  font-size: 1rem;
+  font-size: 100%;
 }
diff --git a/ui/src/Components/Labels/FilterInputLabel/index.js b/ui/src/Components/Labels/FilterInputLabel/index.js
index 9f225b40d..9256a066f 100644
--- a/ui/src/Components/Labels/FilterInputLabel/index.js
+++ b/ui/src/Components/Labels/FilterInputLabel/index.js
@@ -56,32 +56,18 @@ const FilterInputLabel = observer(
           f => f.hits !== alertStore.info.totalAlerts
         ).length > 0;
 
+      const rootClasses = filter.applied
+        ? cs.className
+        : [
+            "badge-secondary components-filteredinputlabel",
+            ...cs.baseClassNames
+          ].join(" ");
+
       return (
         <span
-          className={
-            filter.applied
-              ? cs.className
-              : [
-                  "badge-secondary components-filteredinputlabel",
-                  ...cs.baseClassNames
-                ].join(" ")
-          }
-          style={cs.style}
+          className={`${rootClasses} d-inline-flex flex-row`}
+          style={filter.applied ? cs.style : {}}
         >
-          <button
-            type="button"
-            className="close ml-1"
-            style={cs.style}
-            onClick={() => alertStore.filters.removeFilter(filter.raw)}
-          >
-            <span
-              className={`align-text-bottom ${cs.colorClassNames
-                .filter(c => !c.match(/badge-/))
-                .join(" ")}`}
-            >
-              &times;
-            </span>
-          </button>
           {filter.isValid ? (
             filter.applied ? (
               showCounter ? (
@@ -90,7 +76,7 @@ const FilterInputLabel = observer(
                 </span>
               ) : null
             ) : (
-              <span className="badge mr-1">
+              <span className="badge mr-1 p-0">
                 <FontAwesomeIcon icon={faSpinner} spin />
               </span>
             )
@@ -99,9 +85,9 @@ const FilterInputLabel = observer(
               <FontAwesomeIcon icon={faExclamationCircle} />
             </span>
           )}
-          <TooltipWrapper title="Click to edit this filter">
+          <TooltipWrapper title="Click to edit this filter" className="my-auto">
             <RIEInput
-              className={showCounter ? "" : "align-middle"}
+              className="align-middle"
               defaultValue=""
               value={filter.raw}
               propName="raw"
@@ -109,6 +95,20 @@ const FilterInputLabel = observer(
               classEditing="py-0 border-0 bg-light"
             />
           </TooltipWrapper>
+          <button
+            type="button"
+            className="close ml-1 align-middle"
+            style={filter.applied ? cs.style : {}}
+            onClick={() => alertStore.filters.removeFilter(filter.raw)}
+          >
+            <span
+              className={cs.colorClassNames
+                .filter(c => !c.match(/badge-/))
+                .join(" ")}
+            >
+              &times;
+            </span>
+          </button>
         </span>
       );
     }