diff --git a/packages/grafana-ui/src/components/Forms/Checkbox.tsx b/packages/grafana-ui/src/components/Forms/Checkbox.tsx
index 8cfc3c5312d..92186235865 100644
--- a/packages/grafana-ui/src/components/Forms/Checkbox.tsx
+++ b/packages/grafana-ui/src/components/Forms/Checkbox.tsx
@@ -30,19 +30,23 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
 
     return (
       <label className={cx(styles.wrapper, className)}>
-        <input
-          type="checkbox"
-          className={styles.input}
-          checked={value}
-          disabled={disabled}
-          onChange={handleOnChange}
-          value={htmlValue}
-          {...inputProps}
-          ref={ref}
-        />
-        <span className={styles.checkmark} />
-        {label && <span className={styles.label}>{label}</span>}
-        {description && <span className={styles.description}>{description}</span>}
+        <div>
+          <input
+            type="checkbox"
+            className={styles.input}
+            checked={value}
+            disabled={disabled}
+            onChange={handleOnChange}
+            value={htmlValue}
+            {...inputProps}
+            ref={ref}
+          />
+          <span className={styles.checkmark} />
+        </div>
+        <div>
+          {label && <span className={styles.label}>{label}</span>}
+          {description && <span className={styles.description}>{description}</span>}
+        </div>
       </label>
     );
   }
@@ -55,6 +59,9 @@ export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme2) => {
 
   return {
     wrapper: css`
+      display: flex;
+      gap: ${theme.spacing(labelPadding)};
+      align-items: baseline;
       position: relative;
       vertical-align: middle;
       font-size: 0;
@@ -138,18 +145,17 @@ export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme2) => {
       css`
         position: relative;
         z-index: 2;
-        padding-left: ${theme.spacing(labelPadding)};
-        white-space: nowrap;
         cursor: pointer;
-        position: relative;
         top: -3px;
+        max-width: fit-content;
+        line-height: ${theme.typography.bodySmall.lineHeight};
+        margin-bottom: 0;
       `
     ),
     description: cx(
       labelStyles.description,
       css`
         line-height: ${theme.typography.bodySmall.lineHeight};
-        padding-left: ${theme.spacing(checkboxSize + labelPadding)};
         margin-top: 0; /* The margin effectively comes from the top: -2px on the label above it */
       `
     ),