diff --git a/app/assets/javascripts/highlightTags.js b/app/assets/javascripts/highlightTags.js
index a1ecf2f37..033e6a003 100644
--- a/app/assets/javascripts/highlightTags.js
+++ b/app/assets/javascripts/highlightTags.js
@@ -23,6 +23,8 @@
         .on("input", this.update)
         .on("scroll", this.maintainScrollParity);
 
+      this.initialHeight = this.$textbox.height();
+
       this.$backgroundMaskForeground.width(
         this.$textbox.width()
       );
@@ -32,11 +34,22 @@
 
     };
 
-    this.update = () => this.$backgroundMaskForeground.html(
+    this.resize = () => this.$textbox.height(
+      Math.max(
+        this.initialHeight,
+        this.$backgroundMaskForeground.outerHeight()
+      )
+    );
+
+    this.replacePlaceholders = () => this.$backgroundMaskForeground.html(
       $('<div/>').text(this.$textbox.val()).html().replace(
         tagPattern, match => `<span class='tag'>${match}</span>`
       )
-    );
+    )
+
+    this.update = () => (
+      this.replacePlaceholders() && this.resize()
+    )
 
     this.maintainScrollParity = () => this.$backgroundMaskForeground.scrollTop(
       this.$textbox.scrollTop()
diff --git a/app/assets/stylesheets/components/textbox.scss b/app/assets/stylesheets/components/textbox.scss
index efb692c27..703b3b8cf 100644
--- a/app/assets/stylesheets/components/textbox.scss
+++ b/app/assets/stylesheets/components/textbox.scss
@@ -10,6 +10,7 @@
     resize: none;
     z-index: 20;
     background: none;
+    height: 200px;
   }
 
   &-textbox,
@@ -23,7 +24,6 @@
     margin: 0;
     padding: 4px;
     overflow: hidden;
-    height: 200px;
   }
 
   &-background,
@@ -36,6 +36,7 @@
     color: transparent;
     white-space: pre-wrap;
     border: 2px solid transparent;
+    padding-bottom: $gutter;
   }
 
   &-background {