diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index f0004e3bed7..00d73f66297 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -931,3 +931,12 @@ a.mention-group {
     margin-right: 0.65em;
   }
 }
+
+#topic-footer-buttons {
+  .reason {
+    color: $primary-high;
+    display: inline;
+    margin: 0 0 0 8px;
+    line-height: $line-height-medium;
+  }
+}
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 0ac6faa4b2e..07238d3ceaf 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -441,9 +441,6 @@ nav.post-controls {
 #topic-footer-buttons {
   padding: 10px 10px 0 0;
   float: left;
-  p {
-    color: dark-light-choose($primary-medium, $secondary-medium);
-  }
   .btn {
     @include topic-footer-button;
     .d-icon-bookmark.bookmarked {
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index e87327b25ea..726c6fd614d 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -246,10 +246,19 @@ a.reply-to-tab {
   }
 }
 
-#topic-footer-buttons .reason {
-  /* this is to force the drop-down notification state description para below the button */
-  margin: 0;
-  color: dark-light-choose($primary-medium, $secondary-medium);
+#topic-footer-buttons {
+  .topic-notifications-button,
+  .pinned-button {
+    display: flex;
+    align-items: center;
+    @include breakpoint(mobile-medium) {
+      display: inline-block;
+      .reason {
+        display: block;
+        margin: 0.5em 0 0 0;
+      }
+    }
+  }
 }
 
 #topic-footer-button {