align prefix container (#24448)

frontend/src/metabase/components/TokenField/TokenField.styled.tsx

@@ -35,3 +35,9 @@ export const TokenInputItem = styled.li`
     height: 46px;
   }
 `;
+
+export const PrefixContainer = styled.div`
+  display: flex;
+  align-items: center;
+  color: ${color("text-medium")};
+`;

frontend/src/metabase/components/TokenField/TokenField.tsx

@@ -19,7 +19,11 @@ import {
 } from "metabase/lib/keyboard";
 import { isObscured } from "metabase/lib/dom";
 
-import { TokenInputItem, TokenFieldContainer } from "./TokenField.styled";
+import {
+  TokenInputItem,
+  TokenFieldContainer,
+  PrefixContainer,
+} from "./TokenField.styled";
 
 export type LayoutRendererArgs = {
   valuesList: React.ReactNode;
@@ -579,9 +583,7 @@ export default class TokenField extends Component<
         onMouseDownCapture={this.onMouseDownCapture}
       >
         {!!prefix && (
-          <span className="text-medium mb1 py1 pr1" data-testid="input-prefix">
-            {prefix}
-          </span>
+          <PrefixContainer data-testid="input-prefix">{prefix}</PrefixContainer>
         )}
         {value.map((v, index) => (
           <TokenFieldItem key={index} isValid={validateValue(v)}>