diff --git a/main/templates/whispermaphone/post.html b/main/templates/whispermaphone/post.html
index 16c2ed2..3a56805 100644
--- a/main/templates/whispermaphone/post.html
+++ b/main/templates/whispermaphone/post.html
@@ -29,6 +29,27 @@
 <script>
     const textEl = document.getElementById("text");
     const textExtEl = document.getElementById("extended_text");
+
+    function updateBoxHeight(box) {
+        const rows = box.rows;
+        box.rows = 1;
+
+        //style.height doesn't include padding, .scrollHeight does
+        box.style.height = "auto";
+        const height = box.scrollHeight;
+
+        if (rows > 1 && height < 36) {
+            //set the rows back to 2, set the height to the height, and set top margin
+            box.style.height = height + "px";
+            box.rows = rows;
+            box.style.marginTop = "15px";
+        }else {
+            box.style.height = height + "px";
+            box.rows = rows;
+            box.style.marginTop = "0";
+        }
+    }
+
     textEl.addEventListener("input", evt => {
         // If the length is more than 140
         const value = textEl.value;
@@ -65,15 +86,9 @@
 
     const textboxes = document.getElementsByClassName("thought");
     for (const box of textboxes) {
-        //style.height doesn't include padding, .scrollHeight does
-        //This is fine as long as we reset scrollHeight before changing it
-        //And we have to set it this first time
-        //This also effectively doubles the padding value we set in CSS
-        box.style.height = box.scrollHeight + "px";
-        box.addEventListener("input", evt => {
-            box.style.height = "auto";
-            box.style.height = box.scrollHeight + "px";
-        });
+        //Set the initial heights of the boxes
+        updateBoxHeight(box)
+        box.addEventListener("input", evt => updateBoxHeight(box));
 
         //Allow pasting images into either text box
         box.addEventListener("paste", evt => {