UX: Refactor topic metadata's many floats into flexbox (#6018)

app/assets/stylesheets/common/base/topic-post.scss

@@ -15,8 +15,6 @@
 }
 
 .names {
-  float: left;
-
   span.first {
     font-weight: bold;
   }
@@ -150,6 +148,20 @@
   }
 }
 
+.topic-meta-data {
+  display: flex;
+  align-items: flex-start;
+
+  .names {
+    margin-right: auto;
+  }
+
+  .post-infos {
+    display: flex;
+    align-items: center;
+  }
+}
+
 // we use aside to hold expandable quotes (versus, say, static blockquotes)
 aside.quote {
   margin-top: 1em;
@@ -423,7 +435,6 @@ aside.quote {
   &.via-email,
   &.whisper,
   &.post-locked {
-    margin-right: 5px;
     .d-icon {
       font-size: $font-0;
     }
@@ -682,6 +693,16 @@ a.mention-group {
 
 /* below standard tablet portrait ----------- */
 
+.reply-to-tab {
+  display: flex;
+  align-items: center;
+  margin-right: 2em;
+
+  img {
+    margin: 0 0.25em;
+  }
+}
+
 @media all and (max-width: 767px) {
   .reply-to-tab {
     span {