diff --git a/core/modules/comment/js/comment-new-indicator.js b/core/modules/comment/js/comment-new-indicator.js
index b15e67c..cc3e727 100644
--- a/core/modules/comment/js/comment-new-indicator.js
+++ b/core/modules/comment/js/comment-new-indicator.js
@@ -59,9 +59,9 @@
       if (timestamp > lastViewTimestamp) {
         // Turn the placeholder into an actual "new" indicator.
         var $comment = $(placeholder)
-          .removeClass('hidden')
+          .removeClass('js-hidden')
           .text(newCommentString)
-          .closest('.comment')
+          .closest('.js-comment')
           // Add 'new' class to the comment, so it can be styled.
           .addClass('new');
 
diff --git a/core/modules/comment/js/node-new-comments-link.js b/core/modules/comment/js/node-new-comments-link.js
index 97c7871..6508de2 100644
--- a/core/modules/comment/js/node-new-comments-link.js
+++ b/core/modules/comment/js/node-new-comments-link.js
@@ -109,7 +109,7 @@
           $placeholdersToUpdate[nodeID]
             .attr('href', results[nodeID].first_new_comment_link)
             .text(Drupal.formatPlural(results[nodeID].new_comment_count, '1 new comment', '@count new comments'))
-            .removeClass('hidden');
+            .removeClass('js-hidden hidden');
           show($placeholdersToUpdate[nodeID]);
         }
       }
diff --git a/core/modules/comment/templates/comment.html.twig b/core/modules/comment/templates/comment.html.twig
index 3a7d19b..4e26764 100644
--- a/core/modules/comment/templates/comment.html.twig
+++ b/core/modules/comment/templates/comment.html.twig
@@ -66,32 +66,22 @@
  */
 #}
 
-<article{{ attributes }}>
-  {% if title %}
-    {{ title_prefix }}
-  {% endif %}
-
+<article{{ attributes.addClass('js-comment') }}>
   {#
-  Hide the "new" indicator by default, let a piece of JavaScript ask
-  the server which comments are new for the user. Rendering the final
-  "new" indicator here would break the render cache.
+    Hide the "new" indicator by default, let a piece of JavaScript ask the
+    server which comments are new for the user. Rendering the final "new"
+    indicator here would break the render cache.
   #}
-  <mark class="hidden" data-comment-timestamp="{{ new_indicator_timestamp }}"></mark>
-
-  {% if title %}
-    <h3{{ title_attributes }}>{{ title }}</h3>
-    {{ title_suffix }}
-  {% endif %}
-
+  <mark class="hidden js-hidden" data-comment-timestamp="{{ new_indicator_timestamp }}"></mark>
 
   <footer>
     {{ user_picture }}
     <p>{{ submitted }}</p>
 
     {#
-      Indicate the semantic relationship between parent and child comments
-      for accessibility. The list is difficult to navigate in a screen
-      reader without this information.
+      Indicate the semantic relationship between parent and child comments for
+      accessibility. The list is difficult to navigate in a screen reader
+      without this information.
     #}
     {% if parent %}
       <p class="visually-hidden">{{ parent }}</p>
@@ -101,9 +91,12 @@
   </footer>
 
   <div{{ content_attributes }}>
-    {{ content|without('links') }}
+    {% if title %}
+      {{ title_prefix }}
+      <h3{{ title_attributes }}>{{ title }}</h3>
+      {{ title_suffix }}
+    {% endif %}
+    {{ content }}
   </div>
-  {% if content.links %}
-    {{ content.links }}
-  {% endif %}
+
 </article>
diff --git a/core/themes/bartik/css/components/comments.css b/core/themes/bartik/css/components/comments.css
index 9f22c51..93ebb05 100644
--- a/core/themes/bartik/css/components/comments.css
+++ b/core/themes/bartik/css/components/comments.css
@@ -12,14 +12,18 @@
   display: table;
   vertical-align: top;
 }
-.comment__attribution {
-  display: table-cell;
-  padding: 0 30px 0 0; /* LTR */
-  vertical-align: top;
+[dir="rtl"] .comment {
+  direction: rtl;
+}
+
+.comment__meta {
+  font-size: 1.071em;
+  line-height: 1.2;
+  margin: 4px 0;
   overflow: hidden;
+  padding: 0 30px 0 0; /* LTR */
 }
-[dir="rtl"] .comment__attribution {
-  float: right;
+[dir="rtl"] .comment__meta {
   padding: 0 0 0 30px;
 }
 .comment__attribution img {
@@ -32,11 +36,6 @@
 .comment__author .username {
   white-space: nowrap;
 }
-.comment__submitted__data {
-  margin: 4px 0;
-  font-size: 1.071em;
-  line-height: 1.2;
-}
 .comment__time {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 0.786em;
@@ -48,8 +47,6 @@
 .comment__content {
   font-size: 0.929em;
   line-height: 1.6;
-}
-.comment__text {
   padding: 10px 25px;
   border: 1px solid #d3d7d9;
   display: table-cell;
@@ -57,7 +54,10 @@
   position: relative;
   width: 100%;
 }
-.comment__text:before {
+.comment__content h3 {
+  margin-top: 0;
+}
+.comment__content:before {
   content: '';
   position: absolute;
   right: 100%; /* LTR */
@@ -66,13 +66,13 @@
   border-right: 20px solid #d3d7d9; /* LTR */
   border-bottom: 20px solid transparent;
 }
-[dir="rtl"] .comment__text:before {
+[dir="rtl"] .comment__content:before {
   right: auto;
   left: 100%;
   border-right: none;
   border-left: 20px solid #d3d7d9;
 }
-.comment__text:after {
+.comment__content:after {
   content: '';
   position: absolute;
   right: 100%; /* LTR */
@@ -82,7 +82,7 @@
   border-bottom: 20px solid transparent;
   margin-right: -1px; /* LTR */
 }
-[dir="rtl"] .comment__text:after {
+[dir="rtl"] .comment__content:after {
   right: auto;
   left: 100%;
   border-right: none;
@@ -97,7 +97,8 @@
   margin-right: 40px;
   margin-left: 0;
 }
-.comment ul.links {
+.comment ul.links,
+[dir="rtl"] .comment ul.links {
   padding: 0 0 0.25em 0;
 }
 .comment ul.links li {
@@ -116,14 +117,11 @@
   margin-right: 0;
   padding: 5px 5px 5px 2px;
 }
-.comment-footer {
-  display: table-row;
-}
-.comment--unpublished .comment__text:after,
-.node--unpublished .comment__text:after {
+.comment--unpublished .comment__content:after,
+.node--unpublished .comment__content:after {
   border-right-color: #fff4f4; /* LTR */
 }
-[dir="rtl"] .comment--unpublished .comment__text:after,
-[dir="rtl"] .node--unpublished .comment__text:after {
+[dir="rtl"] .comment--unpublished .comment__content:after,
+[dir="rtl"] .node--unpublished .comment__content:after {
   border-left-color: #fff4f4;
 }
diff --git a/core/themes/bartik/templates/comment.html.twig b/core/themes/bartik/templates/comment.html.twig
index 21cca3c..2d28ac5 100644
--- a/core/themes/bartik/templates/comment.html.twig
+++ b/core/themes/bartik/templates/comment.html.twig
@@ -66,6 +66,7 @@
 {%
   set classes = [
     'comment',
+    'js-comment',
     status != 'published' ? 'comment--' ~ status,
     comment.owner.anonymous ? 'by-anonymous',
     author_id and author_id == commented_entity.getOwnerId() ? 'by-' ~ commented_entity.getEntityTypeId() ~ '-author',
@@ -73,43 +74,37 @@
   ]
 %}
 <article role="article"{{ attributes.addClass(classes)|without('role') }}>
-  <header class="comment-header">
-    <div class="comment__attribution">
-      {{ user_picture }}
-      <div class="comment__submitted">
-        <p class="comment__author comment__submitted__data">{{ author }}</p>
-        <p class="comment__time comment__submitted__data">{{ created }}</p>
-        <p class="comment__permalink comment__submitted__data">{{ permalink }}</p>
-        {#
-          // Indicate the semantic relationship between parent and child comments
-          // for accessibility. The list is difficult to navigate in a screen
-          // reader without this information.
-        #}
-        {% if parent %}
-          <p class="visually-hidden">{{ parent }}</p>
-        {% endif %}
-      </div>
-    </div>
-  </header>
-  <div class="comment__text">
+  {#
+    Hide the "new" indicator by default, let a piece of JavaScript ask the
+    server which comments are new for the user. Rendering the final "new"
+    indicator here would break the render cache.
+  #}
+  <span class="hidden js-hidden" data-comment-timestamp="{{ new_indicator_timestamp }}"></span>
+
+  <footer class="comment__meta">
+    {{ user_picture }}
+    <p class="comment__meta__author">{{ author }}</p>
+    <p class="comment__meta__time">{{ created }}</p>
+    <p class="comment__meta__permalink">{{ permalink }}</p>
     {#
-    Hide the "new" indicator by default, let a piece of JavaScript ask
-    the server which comments are new for the user. Rendering the final
-    "new" indicator here would break the render cache.
+      Indicate the semantic relationship between parent and child comments
+      for accessibility. The list is difficult to navigate in a screen
+      reader without this information.
     #}
-    <span class="hidden new" data-comment-timestamp="{{ new_indicator_timestamp }}"></span>
+    {% if parent %}
+      <p class="visually-hidden">{{ parent }}</p>
+    {% endif %}
+  </footer>
+
+  <div{{ content_attributes.addClass('comment__content') }}>
     {% if title %}
       {{ title_prefix }}
-        <h3{{ title_attributes }}>{{ title }}</h3>
+      <h3{{ title_attributes }}>{{ title }}</h3>
       {{ title_suffix }}
     {% endif %}
-    <div{{ content_attributes.addClass('comment__content') }}>
-      {{ content|without('links') }}
-    </div>
-    <footer class="comment__footer">
-      {% if content.links %}
-        <nav>{{ content.links }}</nav>
-      {% endif %}
-    </footer>
+    {{ content|without('links') }}
+    {% if content.links %}
+      <nav>{{ content.links }}</nav>
+    {% endif %}
   </div>
 </article>
diff --git a/core/themes/classy/templates/content/comment.html.twig b/core/themes/classy/templates/content/comment.html.twig
index 1d56d08..e2a5861 100644
--- a/core/themes/classy/templates/content/comment.html.twig
+++ b/core/themes/classy/templates/content/comment.html.twig
@@ -66,6 +66,7 @@
 {%
   set classes = [
     'comment',
+    'js-comment',
     status != 'published' ? status,
     comment.owner.anonymous ? 'by-anonymous',
     author_id and author_id == commented_entity.getOwnerId() ? 'by-' ~ commented_entity.getEntityTypeId() ~ '-author',
@@ -73,31 +74,21 @@
   ]
 %}
 <article{{ attributes.addClass(classes) }}>
-  {% if title %}
-    {{ title_prefix }}
-  {% endif %}
-
   {#
-  Hide the "new" indicator by default, let a piece of JavaScript ask
-  the server which comments are new for the user. Rendering the final
-  "new" indicator here would break the render cache.
+    Hide the "new" indicator by default, let a piece of JavaScript ask the
+    server which comments are new for the user. Rendering the final "new"
+    indicator here would break the render cache.
   #}
-  <mark class="hidden" data-comment-timestamp="{{ new_indicator_timestamp }}"></mark>
+  <mark class="hidden js-hidden" data-comment-timestamp="{{ new_indicator_timestamp }}"></mark>
 
-  {% if title %}
-    <h3{{ title_attributes }}>{{ title }}</h3>
-    {{ title_suffix }}
-  {% endif %}
-
-
-  <footer>
+  <footer class="comment__meta">
     {{ user_picture }}
-    <p class="submitted">{{ submitted }}</p>
+    <p class="comment__meta__submitted">{{ submitted }}</p>
 
     {#
-      Indicate the semantic relationship between parent and child comments
-      for accessibility. The list is difficult to navigate in a screen
-      reader without this information.
+      Indicate the semantic relationship between parent and child comments for
+      accessibility. The list is difficult to navigate in a screen reader
+      without this information.
     #}
     {% if parent %}
       <p class="parent visually-hidden">{{ parent }}</p>
@@ -107,9 +98,12 @@
   </footer>
 
   <div{{ content_attributes.addClass('content') }}>
-    {{ content|without('links') }}
+    {% if title %}
+      {{ title_prefix }}
+      <h3{{ title_attributes }}>{{ title }}</h3>
+      {{ title_suffix }}
+    {% endif %}
+    {{ content }}
   </div>
-  {% if content.links %}
-    {{ content.links }}
-  {% endif %}
+
 </article>