diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
index 05c4a28be88..43b2d238f65 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
@@ -65,10 +65,12 @@ export default {
     <div class="mr-widget-body media">
       <status-icon status="success" />
       <div class="media-body">
-        <h4>
-          Set by
-          <mr-widget-author :author="mr.setToMWPSBy" />
-          to be merged automatically when the pipeline succeeds
+        <h4 class="flex-container-block">
+          <span class="append-right-10">
+            Set by
+            <mr-widget-author :author="mr.setToMWPSBy" />
+            to be merged automatically when the pipeline succeeds
+          </span>
           <a
             v-if="mr.canCancelAutomaticMerge"
             @click.prevent="cancelAutomaticMerge"
@@ -94,8 +96,13 @@ export default {
           <p v-if="mr.shouldRemoveSourceBranch">
             The source branch will be removed
           </p>
-          <p v-else>
-            The source branch will not be removed
+          <p
+            v-else
+            class="flex-container-block"
+          >
+            <span class="append-right-10">
+              The source branch will not be removed
+            </span>
             <a
               v-if="canRemoveSourceBranch"
               :disabled="isRemovingSourceBranch"
diff --git a/changelogs/unreleased/38541-cancel-alignment.yml b/changelogs/unreleased/38541-cancel-alignment.yml
new file mode 100644
index 00000000000..c6d5136dd57
--- /dev/null
+++ b/changelogs/unreleased/38541-cancel-alignment.yml
@@ -0,0 +1,5 @@
+---
+title: fix button alignment on MWPS component
+merge_request:
+author:
+type: fixed