diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index e3c825435..7b7545613 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -252,6 +252,9 @@
     }
 
     .bottom-line {
+      display: flex;
+      align-items: baseline;
+      flex-wrap: wrap;
       white-space: normal;
       font-weight: 500;
       font-size: 0.9em;
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 1904b9c40..c8673ae19 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -115,6 +115,12 @@
                   size="sm"
                 />
               </span>
+              <span
+                v-if="relationship.followed_by && loggedIn && isOtherUser"
+                class="alert neutral user-role"
+              >
+                {{ $t('user_card.follows_you') }}
+              </span>
               <template v-if="!hideBio">
                 <span
                   v-if="user.deactivated"
@@ -152,12 +158,6 @@
                 >
                   {{ blockExpiry }}
                 </span>
-                <span
-                  v-if="relationship.followed_by && loggedIn && isOtherUser"
-                  class="alert neutral user-role"
-                >
-                  {{ $t('user_card.follows_you') }}
-                </span>
               </template>
             </div>
           </div>