diff --git a/static/styles/portico-signin.css b/static/styles/portico-signin.css
index d65f3d7625..600eb83482 100644
--- a/static/styles/portico-signin.css
+++ b/static/styles/portico-signin.css
@@ -621,6 +621,20 @@ button.login-google-button {
     border-radius: 4px;
 }
 
+#registration #id_team_subdomain.subdomain {
+    text-align: right;
+    position: relative;
+    padding-right: 10px;
+}
+
+#registration .realm_subdomain_label {
+    font-weight: 400;
+    font-size: 1.07em;
+    position: absolute;
+    top: 37px;
+    right: 0;
+}
+
 #registration {
     width: 700px;
 }
diff --git a/templates/zerver/register.html b/templates/zerver/register.html
index ce66c34b2a..ee59bf25c2 100644
--- a/templates/zerver/register.html
+++ b/templates/zerver/register.html
@@ -105,15 +105,15 @@ Form is validated both client-side using jquery-validate (see signup.js) and ser
                 </label>
                 <div class="breakpoint">
                     <div class="inline-block relative">
-                        <input id="id_team_subdomain" class="required" type="text"
+                        <input id="id_team_subdomain" class="required {% if realms_have_subdomains %}subdomain{% endif %}" type="text"
                             placeholder="acme"
                             value="{% if form.realm_subdomain.value() %}{{ form.realm_subdomain.value() }}{% endif %}"
                             name="realm_subdomain" maxlength={{ MAX_REALM_SUBDOMAIN_LENGTH }} required />
+                        {% if realms_have_subdomains %}
+                        <p class="realm_subdomain_label">.{{ external_host }}</p>
+                        {% endif %}
                         <div class="required"></div>
                     </div>
-                    {% if realms_have_subdomains %}
-                    <div class="inline-block external-host"> .{{ external_host }}</div>
-                    {% endif %}
                     <p id="id_team_subdomain_error_client" class="error help-inline text-error"></p>
                     {% if form.realm_subdomain.errors %}
                         {% for error in form.realm_subdomain.errors %}
@@ -175,6 +175,12 @@ if ($('#id_email').length === 1) {
     common.autofocus('#id_full_name');
 }
 
+// if realms have subdomains, set the subdomain input width
+$('#id_team_subdomain').css({
+    width: 300 - $('.realm_subdomain_label').width(),
+    'margin-right': $('.realm_subdomain_label').width() + 4,
+});
+
 // reset error message displays
 $('#id_team_subdomain_error_client').css('display', 'none');
 if ($('.team_subdomain_error_server').text() === '') {