diff --git a/app/assets/stylesheets/common/base/rtl.scss b/app/assets/stylesheets/common/base/rtl.scss
index 1af800b288c..ad7e5c4af7a 100644
--- a/app/assets/stylesheets/common/base/rtl.scss
+++ b/app/assets/stylesheets/common/base/rtl.scss
@@ -56,9 +56,3 @@ float: left !important;
 .rtl .dashboard-right {
   float: left !important;
 }
-
-// Right and left will be flipped by the r2 gem
-.rtl #caret-clone[style] {
-  right: auto !important;
-  left: -7000px !important;
-}
diff --git a/vendor/assets/javascripts/caret_position.js b/vendor/assets/javascripts/caret_position.js
index beadddffdbd..8a7b2e0616e 100644
--- a/vendor/assets/javascripts/caret_position.js
+++ b/vendor/assets/javascripts/caret_position.js
@@ -45,7 +45,7 @@ $.fn.caretPosition = function(options) {
   };
 
   styles = getStyles(textarea[0]);
-  clone = $("<div id='caret-clone'><p></p></div>").appendTo("body");
+  clone = $("<div><p></p></div>").appendTo("body");
   p = clone.find("p");
   clone.width(textarea.width());
   clone.height(textarea.height());
@@ -54,6 +54,7 @@ $.fn.caretPosition = function(options) {
     return styles.getPropertyValue(prop);
   };
 
+  const isRTL = $('html').hasClass('rtl');
   clone.css({
     border: "1px solid black",
     padding: important("padding"),
@@ -62,7 +63,8 @@ $.fn.caretPosition = function(options) {
     "overflow-y": "auto",
     "word-wrap": "break-word",
     position: "absolute",
-    left: "-7000px"
+    left: isRTL ? "auto" : "-7000px",
+    right: isRTL ? "-7000px" : "auto"
   });
 
   p.css({