diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
index 16a7119e1028b2cb5dd580d3f1a6da3b9db38ded..5e89d28ee50ee0445be33f6c462b85015b2807dc 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
@@ -17,7 +17,7 @@ import readyToMergeQuery from 'ee_else_ce/vue_merge_request_widget/queries/state
 import createFlash from '~/flash';
 import { secondsToMilliseconds } from '~/lib/utils/datetime_utility';
 import simplePoll from '~/lib/utils/simple_poll';
-import { __, s__ } from '~/locale';
+import { __, s__, n__ } from '~/locale';
 import SmartInterval from '~/smart_interval';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { helpPagePath } from '~/helpers/help_page_helper';
@@ -337,6 +337,9 @@ export default {
         ? __('Deleted the source branch.')
         : __('Did not delete the source branch.');
     },
+    sourceHasDivergedFromTarget() {
+      return this.mr.divergedCommitsCount > 0;
+    },
     showMergeDetailsHeader() {
       return ['readyToMerge'].indexOf(this.mr.state) >= 0;
     },
@@ -509,6 +512,8 @@ export default {
     mergeAndSquashCommitTemplatesHintText: s__(
       'mrWidget|To change these default messages, edit the templates for both the merge and squash commit messages. %{linkStart}Learn more.%{linkEnd}',
     ),
+    sourceDivergedFromTargetText: s__('mrWidget|The source branch is %{link} the target branch'),
+    divergedCommits: (count) => n__('%d commit behind', '%d commits behind', count),
   },
 };
 </script>
@@ -663,7 +668,7 @@ export default {
                 {{ __('Merge details') }}
               </p>
               <ul class="gl-pl-4 gl-mb-0 gl-ml-3 gl-text-gray-600">
-                <li v-if="mr.divergedCommitsCount > 0" class="gl-line-height-normal">
+                <li v-if="sourceHasDivergedFromTarget" class="gl-line-height-normal">
                   <gl-sprintf
                     :message="s__('mrWidget|The source branch is %{link} the target branch')"
                   >
@@ -703,6 +708,16 @@ export default {
               :class="{ 'gl-mb-5': shouldShowMergeControls }"
               class="gl-w-full gl-order-n1 gl-text-gray-500"
             >
+              <p v-if="sourceHasDivergedFromTarget" class="gl-display-inline gl-m-0">
+                <gl-sprintf :message="$options.i18n.sourceDivergedFromTargetText">
+                  <template #link>
+                    <gl-link :href="mr.targetBranchPath">{{
+                      $options.i18n.divergedCommits(mr.divergedCommitsCount)
+                    }}</gl-link>
+                  </template>
+                </gl-sprintf>
+              </p>
+              <template v-if="sourceHasDivergedFromTarget"> &middot; </template>
               <added-commit-message
                 :is-squash-enabled="squashBeforeMerge"
                 :is-fast-forward-enabled="!shouldShowMergeEdit"
@@ -715,8 +730,6 @@ export default {
                   :state="mr.state"
                   :related-links="mr.relatedLinks"
                   :show-assign-to-me="false"
-                  :diverged-commits-count="mr.divergedCommitsCount"
-                  :target-branch-path="mr.targetBranchPath"
                   class="mr-ready-merge-related-links gl-display-inline"
                 />
               </template>
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_ready_to_merge_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_ready_to_merge_spec.js
index f5a489f1a32455a7231ac07c24ca77d54cb67fb0..9844af208d2f78cc72584e2d48e997ddd48622c5 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_ready_to_merge_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_ready_to_merge_spec.js
@@ -105,6 +105,7 @@ const createComponent = (
     },
     stubs: {
       CommitEdit,
+      GlSprintf,
     },
     apolloProvider: createMockApollo([[readyToMergeQuery, readyToMergeResponseSpy]]),
   });
@@ -775,6 +776,34 @@ describe('ReadyToMerge', () => {
     });
   });
 
+  describe('source and target branches diverged', () => {
+    describe('when the MR is showing the Merge button', () => {
+      it('does not display the diverged commits message if the source branch is not behind the target', () => {
+        createComponent({ mr: { divergedCommitsCount: 0 } });
+
+        const textBody = wrapper.text();
+
+        expect(textBody).toEqual(
+          expect.not.stringContaining('The source branch is 0 commits behind the target branch'),
+        );
+        expect(textBody).toEqual(
+          expect.not.stringContaining('The source branch is 0 commit behind the target branch'),
+        );
+        expect(textBody).toEqual(
+          expect.not.stringContaining('The source branch is behind the target branch'),
+        );
+      });
+
+      it('shows the diverged commits text when the source branch is behind the target', () => {
+        createComponent({ mr: { divergedCommitsCount: 9001 } });
+
+        expect(wrapper.text()).toEqual(
+          expect.stringContaining('The source branch is 9001 commits behind the target branch'),
+        );
+      });
+    });
+  });
+
   describe('Merge button when pipeline has failed', () => {
     beforeEach(() => {
       createComponent({