diff --git a/core/modules/comment/js/comment-new-indicator.js b/core/modules/comment/js/comment-new-indicator.js
index b15e67c..08ec258 100644
--- a/core/modules/comment/js/comment-new-indicator.js
+++ b/core/modules/comment/js/comment-new-indicator.js
@@ -61,7 +61,7 @@
         var $comment = $(placeholder)
           .removeClass('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/templates/comment.html.twig b/core/modules/comment/templates/comment.html.twig
index 31b82e2..638b421 100644
--- a/core/modules/comment/templates/comment.html.twig
+++ b/core/modules/comment/templates/comment.html.twig
@@ -67,32 +67,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 %}
-
-
   <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>
@@ -102,9 +92,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..797d86b 100644
--- a/core/themes/bartik/css/components/comments.css
+++ b/core/themes/bartik/css/components/comments.css
@@ -12,14 +12,15 @@
   display: table;
   vertical-align: top;
 }
-.comment__attribution {
-  display: table-cell;
+[dir="rtl"] .comment {
+  direction: rtl;
+}
+
+.comment__meta {
+  font-size: 1.071em;
   padding: 0 30px 0 0; /* LTR */
-  vertical-align: top;
-  overflow: hidden;
 }
-[dir="rtl"] .comment__attribution {
-  float: right;
+[dir="rtl"] .comment__meta {
   padding: 0 0 0 30px;
 }
 .comment__attribution img {
@@ -29,27 +30,27 @@
 .comment .field-name-user-picture img {
   margin: 0;
 }
-.comment__author .username {
+.comment__meta__author .username {
   white-space: nowrap;
 }
-.comment__submitted__data {
+.comment__meta__author {
   margin: 4px 0;
-  font-size: 1.071em;
   line-height: 1.2;
 }
-.comment__time {
+.comment__meta__time {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 0.786em;
+  font-size: 0.733em;
+  line-height: 1.2;
   color: #68696b;
+  margin-bottom: 4px;
 }
-.comment__permalink {
-  font-size: 0.786em;
+.comment__meta__permalink {
+  font-size: 0.733em;
+  line-height: 1.2;
 }
 .comment__content {
   font-size: 0.929em;
   line-height: 1.6;
-}
-.comment__text {
   padding: 10px 25px;
   border: 1px solid #d3d7d9;
   display: table-cell;
@@ -57,7 +58,12 @@
   position: relative;
   width: 100%;
 }
-.comment__text:before {
+
+.comment__content h3 {
+  font-size: 1.175em;
+}
+
+.comment__content:before {
   content: '';
   position: absolute;
   right: 100%; /* LTR */
@@ -66,13 +72,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 +88,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,10 +103,12 @@
   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 {
+  font-size: 1.08em;
   padding: 0 0.5em 0 0; /* LTR */
 }
 [dir="rtl"] .comment ul.links li {
@@ -116,14 +124,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 2dac831..989d7d9 100644
--- a/core/themes/bartik/templates/comment.html.twig
+++ b/core/themes/bartik/templates/comment.html.twig
@@ -70,6 +70,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',
@@ -77,43 +78,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" 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 bb06364..f0d6505 100644
--- a/core/themes/classy/templates/content/comment.html.twig
+++ b/core/themes/classy/templates/content/comment.html.twig
@@ -70,6 +70,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',
@@ -77,31 +78,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>
 
-  {% 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>
@@ -111,9 +102,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>