diff --git a/web/styles/typeahead.css b/web/styles/typeahead.css
index a48baa9194..d43be53430 100644
--- a/web/styles/typeahead.css
+++ b/web/styles/typeahead.css
@@ -84,17 +84,22 @@
         }
     }
 
+    .pronouns,
     .autocomplete_secondary {
         align-self: end;
         opacity: 0.8;
         font-size: 85%;
-        flex: 1 1 0;
         overflow: hidden;
         text-overflow: ellipsis;
         position: relative;
         top: -1px;
     }
 
+    .autocomplete_secondary {
+        flex: 1 1 0;
+    }
+
+    .active .pronouns,
     .active .autocomplete_secondary {
         opacity: 1;
     }
diff --git a/web/templates/typeahead_list_item.hbs b/web/templates/typeahead_list_item.hbs
index 0dd3038c15..8db0266203 100644
--- a/web/templates/typeahead_list_item.hbs
+++ b/web/templates/typeahead_list_item.hbs
@@ -26,7 +26,7 @@
         {{~/if~}}
     </strong>
     {{~#if has_pronouns}}
-        <span class="pronouns">({{pronouns}})</span>
+        <span class="pronouns">{{pronouns}}{{#if (or has_secondary_html has_secondary)}},{{/if}}</span>
     {{~/if}}
     {{~#if should_add_guest_user_indicator}}
         <i>({{t 'guest'}})</i>