ballot page now looks good

public/static/script.js

@@ -1,10 +1,21 @@
 htmx.onLoad(function(content) {
-    var sortables = content.querySelectorAll(".sortable");
-    for (var i = 0; i < sortables.length; i++) {
-      var sortable = sortables[i];
+    var sortable = content.querySelector(".sortable");
+    if(sortable != null) {
       new Sortable(sortable, {
           animation: 150,
-          ghostClass: 'blue-background-class'
+          ghostClass: 'blue-background-class',
+          group: {
+            name: 'shared'
+          }
+      });
+    }
+    sortable = content.querySelector(".sortable-from")
+    if(sortable != null) {
+      new Sortable(sortable, {
+          animation: 150,
+          ghostClass: 'blue-background-class',
+          group: 'shared',
+          sort: false
       });
     }
 })

public/static/style.css

@@ -1,25 +1,21 @@
-body
-{
+body {
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
-#inputs, .options
-{
+#inputs, .options {
     display: flex;
     flex-direction: column;
     max-width: 400px;
     gap: 10px;
 }
 
-.options
-{
+.options {
     padding: 10px
 }
 
-#permenant-input
-{
+#permenant-input {
     display: flex;
     flex-direction: column;
 }
@@ -29,3 +25,25 @@ body
   display: flex;
   background-color: white;
 }
+
+.draggable-options {
+  width: 12em;
+  min-height: 70px;
+}
+
+.draggable-options > div > * {
+  text-align: center;
+}
+
+#drag-boxes-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 100%;
+  justify-content: space-around;
+  justify-items: space-between;
+}
+
+#ballot-submit {
+  margin-top: 10px;
+}