--- a/devtools/client/responsive.html/components/device-adder.js
+++ b/devtools/client/responsive.html/components/device-adder.js
@@ -130,105 +130,120 @@ module.exports = createClass({
         touch: false,
       });
     }
 
     return dom.div(
       {
         id: "device-adder"
       },
-      dom.label(
+      dom.div(
         {
-          id: "device-adder-name",
-        },
-        dom.span(
-          {
-            className: "device-adder-label",
-          },
-          getStr("responsive.deviceAdderName")
-        ),
-        dom.input({
-          defaultValue: deviceName,
-          ref: input => {
-            this.nameInput = input;
-          },
-        })
-      ),
-      dom.label(
-        {
-          id: "device-adder-size",
+          id: "device-adder-content",
         },
-        dom.span(
+        dom.div(
           {
-            className: "device-adder-label"
-          },
-          getStr("responsive.deviceAdderSize")
-        ),
-        ViewportDimension({
-          viewport: {
-            width,
-            height,
-          },
-          onChangeSize: this.onChangeSize,
-          onRemoveDeviceAssociation: () => {},
-        })
-      ),
-      dom.label(
-        {
-          id: "device-adder-pixel-ratio",
-        },
-        dom.span(
-          {
-            className: "device-adder-label"
+            id: "device-adder-column-1",
           },
-          getStr("responsive.deviceAdderPixelRatio")
-        ),
-        dom.input({
-          type: "number",
-          step: "any",
-          defaultValue: normalizedViewport.pixelRatio,
-          ref: input => {
-            this.pixelRatioInput = input;
-          },
-        })
-      ),
-      dom.label(
-        {
-          id: "device-adder-user-agent",
-        },
-        dom.span(
-          {
-            className: "device-adder-label"
-          },
-          getStr("responsive.deviceAdderUserAgent")
+          dom.label(
+            {
+              id: "device-adder-name",
+            },
+            dom.span(
+              {
+                className: "device-adder-label",
+              },
+              getStr("responsive.deviceAdderName")
+            ),
+            dom.input({
+              defaultValue: deviceName,
+              ref: input => {
+                this.nameInput = input;
+              },
+            })
+          ),
+          dom.label(
+            {
+              id: "device-adder-size",
+            },
+            dom.span(
+              {
+                className: "device-adder-label"
+              },
+              getStr("responsive.deviceAdderSize")
+            ),
+            ViewportDimension({
+              viewport: {
+                width,
+                height,
+              },
+              onChangeSize: this.onChangeSize,
+              onRemoveDeviceAssociation: () => {},
+            })
+          ),
+          dom.label(
+            {
+              id: "device-adder-pixel-ratio",
+            },
+            dom.span(
+              {
+                className: "device-adder-label"
+              },
+              getStr("responsive.deviceAdderPixelRatio")
+            ),
+            dom.input({
+              type: "number",
+              step: "any",
+              defaultValue: normalizedViewport.pixelRatio,
+              ref: input => {
+                this.pixelRatioInput = input;
+              },
+            })
+          )
         ),
-        dom.input({
-          defaultValue: normalizedViewport.userAgent,
-          ref: input => {
-            this.userAgentInput = input;
+        dom.div(
+          {
+            id: "device-adder-column-2",
           },
-        })
-      ),
-      dom.label(
-        {
-          id: "device-adder-touch",
-        },
-        dom.span(
-          {
-            className: "device-adder-label"
-          },
-          getStr("responsive.deviceAdderTouch")
+          dom.label(
+            {
+              id: "device-adder-user-agent",
+            },
+            dom.span(
+              {
+                className: "device-adder-label"
+              },
+              getStr("responsive.deviceAdderUserAgent")
+            ),
+            dom.input({
+              defaultValue: normalizedViewport.userAgent,
+              ref: input => {
+                this.userAgentInput = input;
+              },
+            })
+          ),
+          dom.label(
+            {
+              id: "device-adder-touch",
+            },
+            dom.span(
+              {
+                className: "device-adder-label"
+              },
+              getStr("responsive.deviceAdderTouch")
+            ),
+            dom.input({
+              defaultChecked: normalizedViewport.touch,
+              type: "checkbox",
+              ref: input => {
+                this.touchInput = input;
+              },
+            })
+          )
         ),
-        dom.input({
-          defaultChecked: normalizedViewport.touch,
-          type: "checkbox",
-          ref: input => {
-            this.touchInput = input;
-          },
-        })
       ),
       dom.button(
         {
           id: "device-adder-save",
           onClick: this.onDeviceAdderSave,
         },
         getStr("responsive.deviceAdderSave")
       )

--- a/devtools/client/responsive.html/components/device-modal.js
+++ b/devtools/client/responsive.html/components/device-modal.js
@@ -186,23 +186,23 @@ module.exports = createClass({
                       className: "device-name",
                     },
                     device.name
                   ),
                   removeDeviceButton
                 );
               })
             );
-          }),
-          DeviceAdder({
-            devices,
-            viewportTemplate: deviceAdderViewportTemplate,
-            onAddCustomDevice,
           })
         ),
+        DeviceAdder({
+          devices,
+          viewportTemplate: deviceAdderViewportTemplate,
+          onAddCustomDevice,
+        }),
         dom.button(
           {
             id: "device-submit-button",
             onClick: this.onDeviceModalSubmit,
           },
           getStr("responsive.done")
         )
       ),

--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -421,17 +421,17 @@ select > option.divider {
   display: none;
   position: absolute;
   margin: auto;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   width: 642px;
-  height: 612px;
+  height: 650px;
   z-index: 1;
 }
 
 /* Handles the opening/closing of the modal */
 #device-modal-wrapper.opened .device-modal {
   animation: fade-in-and-up 0.3s ease;
   animation-fill-mode: forwards;
   display: block;
@@ -454,19 +454,19 @@ select > option.divider {
   opacity: 0.5;
 }
 
 .device-modal-content {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   overflow: auto;
-  height: 550px;
+  height: 515px;
   width: 600px;
-  margin: 20px;
+  margin: 20px 20px 0;
 }
 
 #device-close-button,
 #device-close-button::before {
   position: absolute;
   top: 5px;
   right: 2px;
   width: 12px;
@@ -523,16 +523,18 @@ select > option.divider {
   background-color: var(--theme-tab-toolbar-background);
   border-width: 1px 0 0 0;
   border-top-width: 1px;
   border-top-style: solid;
   border-top-color: var(--theme-splitter-color);
   color: var(--theme-body-color);
   width: 100%;
   height: 20px;
+  position: absolute;
+  bottom: 0;
 }
 
 #device-submit-button:hover {
   background-color: var(--toolbar-tab-hover);
 }
 
 #device-submit-button:hover:active {
   background-color: var(--submit-button-active-background-color);
@@ -541,16 +543,30 @@ select > option.divider {
 
 /**
  * Device Adder
  */
 
 #device-adder {
   display: flex;
   flex-direction: column;
+  margin: 0 20px;
+}
+
+#device-adder-content {
+  display: flex;
+}
+
+#device-adder-column-1 {
+  flex: 1;
+  margin-right: 10px;
+}
+
+#device-adder-column-2 {
+  flex: 2;
 }
 
 #device-adder button {
   background-color: var(--theme-tab-toolbar-background);
   border: 1px solid var(--theme-splitter-color);
   border-radius: 2px;
   color: var(--theme-body-color);
   margin: 0 auto;
@@ -559,23 +575,23 @@ select > option.divider {
 #device-adder label {
   display: flex;
   margin-bottom: 5px;
   align-items: center;
 }
 
 #device-adder label > input,
 #device-adder label > .viewport-dimension {
-  width: 130px;
+  flex: 1;
   margin: 0;
 }
 
 #device-adder input {
   background: transparent;
-  border: none;
+  border: 1px solid transparent;
   text-align: center;
   color: var(--theme-body-color-inactive);
   transition: all 0.25s ease;
 }
 
 #device-adder input:focus {
   color: var(--viewport-active-color);
 }
@@ -584,14 +600,14 @@ select > option.divider {
 #device-adder label > .viewport-dimension:focus  {
   border-bottom: 1px solid var(--theme-selection-background);
   outline: none;
 }
 
 .device-adder-label {
   display: inline-block;
   margin-right: 5px;
-  width: 35px;
+  min-width: 35px;
 }
 
 #device-adder #device-adder-save {
   margin-top: 5px;
 }