diff --git a/src/css/Controls.scss b/src/css/Controls.scss
index 92f77bad..e103e019 100644
--- a/src/css/Controls.scss
+++ b/src/css/Controls.scss
@@ -10,10 +10,14 @@
   padding-bottom: calc($gutter-width / 2);
 }
 
+.Controls__input-group {
+  display: flex;
+}
+
 .Controls__label {
+  margin-left: calc($gutter-width / 2);
   font-weight: normal;
   cursor: pointer;
-  width: 100%;
 }
 
 .Controls__error-message {
diff --git a/src/ts/components/Controls.tsx b/src/ts/components/Controls.tsx
index ca452e9e..c2adb17d 100644
--- a/src/ts/components/Controls.tsx
+++ b/src/ts/components/Controls.tsx
@@ -188,23 +188,29 @@ const Controls = <TPluginState extends IPluginState>({
         {enableDevMode && (
           <div>
             <hr />
-            <div>
+            <div className="Controls__input-group">
               <input
                 type="checkbox"
+                id="real-time-checks"
                 checked={requestMatchesOnDocModified}
                 onChange={() =>
                   setRequestOnDocModified(!requestMatchesOnDocModified)
                 }
               ></input>
-              <label>Enable real-time checking</label>
+              <label htmlFor="real-time-checks" className="Controls__label">
+                Enable real-time checking
+              </label>
             </div>
-            <div>
+            <div className="Controls__input-group">
               <input
                 type="checkbox"
+                id="debug"
                 checked={debug}
                 onChange={() => setDebugState(!debug)}
               ></input>
-              <label>Show pending and inflight checks</label>
+              <label htmlFor="debug" className="Controls__label">
+                Show pending and inflight checks
+              </label>
             </div>
           </div>
         )}