update layout

css/style.css

@@ -347,13 +347,17 @@ code {
   gap: 20px;
 }
 
-.input-methods-row .column {
+.input-methods-row .column-left {
+  width: 50%;
+}
+.input-methods-row .column-right {
   width: 50%;
 }
 
-.column {
+.column-left {
   float: left;
   border-right: 1px solid var(--border-subtle);
+  padding-right: 12px;
 }
 
 .column-right {
@@ -851,7 +855,7 @@ input[type="file"]::file-selector-button {
     flex-direction: column;
   }
 
-  .column,
+  .column-left,
   .column-right {
     float: none;
     width: 100%;

index.html

@@ -58,14 +58,14 @@
     <section class="section step bottom-divider" id="step-1">
       <div class="step-num">1</div>
       <section class="sub-section input-methods-row">
-        <div class="column" id="file-input-column">
+        <div class="column-left" id="file-input-column">
           <h2 class="sub-section-title">Select image</h2>
           <div class="note upload-note">You can import multiple images at once.<br>All processing is done locally in your browser: your images are not uploaded or stored anywhere online.</div>
           <input type="file" id="file-input" name="file-input" multiple/><br />
           <div id="file-input-column-items"></div>
           <div class="note" id="continue-note">Add more images or <a href="#step-2">continue to step 2</a></div>
         </div>
-        <div class="column column-right">
+        <div class="column-right">
           <h2 class="sub-section-title">or paste existing byte array</h2>
           <textarea id="byte-input" class="byte-input" placeholder="i.e. 0xff, 0x81, 0x0d, 0x8d, 0xb1, 0xb1, 0x80, 0xfc"></textarea><br />
           <div class="text-input-size">