diff --git a/lib/devtools.js b/lib/devtools.js
index 49f9741..b24fc70 100644
--- a/lib/devtools.js
+++ b/lib/devtools.js
@@ -30,6 +30,27 @@ customElements.define('developer-tooling', class extends HTMLElement {
           #change-port-show {
             display: none;
           }
+          #change-port-input {
+            width: 80px;
+          }
+
+          /* hide up/down arrow for input type=number */
+          input::-webkit-outer-spin-button,
+          input::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+          }
+
+          .panels-wrapper {
+            display: flex;
+            gap: 30px;
+          }
+          .panel-left {
+            flex: 1;
+          }
+          .panel-right {
+            width: 400px;
+          }
 
           .hidden {
             display: none;
@@ -70,14 +91,6 @@ customElements.define('developer-tooling', class extends HTMLElement {
             border-radius: 1px;
             white-space: nowrap;
           }
-          #remote-inspect-explain {
-            float:left;
-            max-width:55%;
-          }
-          #remote-inspect {
-            float:right;
-            max-width:40%;
-          }
           #server-message {
             font-size: 0.8rem;
             margin-top: 30px;
@@ -122,8 +135,8 @@ customElements.define('developer-tooling', class extends HTMLElement {
 
         <div>
           <h1>Developer Tooling</h1>
-          <div>
-            <div id="remote-inspect-explain">
+          <div class="panels-wrapper">
+            <div class="panel-left">
               <h2>Remotely inspect Pear applications.</h2>
               <p> Some application setup is required to enable remote debugging </p>
               <p> Install the <code>pear-inspect</code> module into the application </p>
@@ -141,7 +154,7 @@ customElements.define('developer-tooling', class extends HTMLElement {
               <p>When the application is opened in development mode the inspection key will be logged.</p>
               <p>Paste the logged key into the input to add it. Then open in Chrome or copy the URL to a compatible inspect tool to view the remote target.</p>
             </div>
-            <div id="remote-inspect">
+            <div class="panel-right">
               <div>
                 <form id="add-key-form">
                   <input id="add-key-input" type="text" placeholder="Paste Pear Inspector Key Here"/>
@@ -160,7 +173,13 @@ customElements.define('developer-tooling', class extends HTMLElement {
                   </span>
                   <div>
                     <form id="change-port-form" class="hidden">
-                      <input id="change-port-input" type="number" placeholder="New port" />
+                      <input
+                        id="change-port-input"
+                        type="number"
+                        placeholder="New port"
+                        min="1024"
+                        max="65535"
+                      />
                     </form>
                     <p id="change-port-error"></p>
                   </div>