diff --git a/core/modules/comment/js/comment-new-indicator.js b/core/modules/comment/js/comment-new-indicator.js
index 8a2bf07..7567963 100644
--- a/core/modules/comment/js/comment-new-indicator.js
+++ b/core/modules/comment/js/comment-new-indicator.js
@@ -65,7 +65,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..14c52eb 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,11 @@
   </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..8515cd9 100644
--- a/core/themes/bartik/css/components/comments.css
+++ b/core/themes/bartik/css/components/comments.css
@@ -7,19 +7,23 @@
 #content .comment-wrapper h2 {
   margin-bottom: 1em;
 }
+#content .comment-wrapper h2.comment-form__title {
+  margin-bottom: 1em;
+}
 .comment {
-  margin-bottom: 20px;
+  margin-bottom: 19px;
+  vertical-align: top;
   display: table;
-  vertical-align: top;
 }
-.comment__attribution {
-  display: table-cell;
+[dir="rtl"] .comment {
+  direction: rtl;
+}
+
+.comment__meta {
   padding: 0 30px 0 0; /* LTR */
-  vertical-align: top;
-  overflow: hidden;
+  font-size: 1.071em;
 }
-[dir="rtl"] .comment__attribution {
-  float: right;
+[dir="rtl"] .comment__meta {
   padding: 0 0 0 30px;
 }
 .comment__attribution img {
@@ -32,32 +36,34 @@
 .comment__author .username {
   white-space: nowrap;
 }
-.comment__submitted__data {
+.comment__author {
   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;
+  margin-bottom: 4px;
   color: #68696b;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 0.733em;
+  line-height: 1.2;
+
 }
 .comment__permalink {
-  font-size: 0.786em;
+  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;
-  vertical-align: top;
   position: relative;
+  display: table-cell;
+  padding: 10px 25px 10px 25px;
+  vertical-align: top;
   width: 100%;
+  border: 1px solid #d3d7d9;
+  font-size: 0.929em;
+  line-height: 1.6;
 }
-.comment__text:before {
+
+.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;
@@ -90,6 +96,14 @@
   margin-right: 0;
   margin-left: -1px;
 }
+.comment__content h3 {
+  margin-top: 0.94em;
+  margin-bottom: 0.45em;
+  font-size: 1.171em;
+}
+.comment__content nav {
+  padding-top: 1px;
+}
 .comment .indented {
   margin-left: 40px; /* LTR */
 }
@@ -97,13 +111,14 @@
   margin-right: 40px;
   margin-left: 0;
 }
-.comment ul.links {
+.comment .links {
   padding: 0 0 0.25em 0;
 }
-.comment ul.links li {
+.comment .links li {
   padding: 0 0.5em 0 0; /* LTR */
+  font-size: 1.08em;
 }
-[dir="rtl"] .comment ul.links li {
+[dir="rtl"] .comment .links li {
   padding: 0 0 0 0.5em;
 }
 .comment--unpublished {
@@ -116,14 +131,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..8927db4 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__author">{{ author }}</p>
+    <p class="comment__time">{{ created }}</p>
+    <p class="comment__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..25e7d37 100644
--- a/core/themes/classy/templates/content/comment.html.twig
+++ b/core/themes/classy/templates/content/comment.html.twig
@@ -70,38 +70,28 @@
 {%
   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',
-    'clearfix',
   ]
 %}
 <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__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 +101,11 @@
   </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>