diff --git a/stylesheets/components/CompositionArea.scss b/stylesheets/components/CompositionArea.scss
index 533cb0159751..9db638ea13ca 100644
--- a/stylesheets/components/CompositionArea.scss
+++ b/stylesheets/components/CompositionArea.scss
@@ -51,6 +51,10 @@
     }
   }
 
+  &__button-edit {
+    margin-bottom: 4px;
+  }
+
   &__edit-button {
     @include button-reset;
     @include rounded-corners;
diff --git a/ts/components/CompositionArea.tsx b/ts/components/CompositionArea.tsx
index 6335138b8915..f721b8b37bb3 100644
--- a/ts/components/CompositionArea.tsx
+++ b/ts/components/CompositionArea.tsx
@@ -569,7 +569,7 @@ export function CompositionArea({
   const editMessageFragment = draftEditMessage ? (
     <>
       {large && <div className="CompositionArea__placeholder" />}
-      <div className="CompositionArea__button-cell">
+      <div className="CompositionArea__button-cell CompositionArea__button-edit">
         <button
           aria-label={i18n('icu:CompositionArea__edit-action--discard')}
           className="CompositionArea__edit-button CompositionArea__edit-button--discard"