diff --git a/src/components/Labeled.module.css b/src/components/Labeled.module.css
index 14575fd..7afbb75 100644
--- a/src/components/Labeled.module.css
+++ b/src/components/Labeled.module.css
@@ -5,12 +5,19 @@
     flex-direction: column;
     align-items: stretch;
     gap: var(--spacing-xs);
+    &.inline {
+      flex-direction: row;
+      gap: var(--spacing-s);
+    }
     label {
       width: 100%;
       display: flex;
       flex-direction: row;
       align-items: baseline;
       font-size: var(--font-size-xs);
+      .inline & {
+        width: fit-content;
+      }
     }
   }
 }
diff --git a/src/components/Labeled.tsx b/src/components/Labeled.tsx
index 70fc8cd..114f1a6 100644
--- a/src/components/Labeled.tsx
+++ b/src/components/Labeled.tsx
@@ -1,13 +1,15 @@
+import cx from 'clsx';
 import styles from './Labeled.module.css';
 
 type LabeledProps = {
   label: string;
+  inline?: boolean;
   children: React.ReactNode;
 };
 
-export function Labeled({ label, children }: LabeledProps) {
+export function Labeled({ label, inline = false, children }: LabeledProps) {
   return (
-    <div className={styles.labeled}>
+    <div className={cx(styles.labeled, inline && styles.inline)}>
       <label>{label}</label>
       {children}
     </div>