diff --git a/lms/static/sass/features/_course-experience.scss b/lms/static/sass/features/_course-experience.scss
index 11430439f2..66ba712ea7 100644
--- a/lms/static/sass/features/_course-experience.scss
+++ b/lms/static/sass/features/_course-experience.scss
@@ -421,58 +421,62 @@
 }
 
 // date summary
-.date-summary {
-  @include clearfix;
+.date-summary-container {
+  .date-summary {
+    @include clearfix;
 
-  display: flex;
-  justify-content: space-between;
-  padding: 12px 0;
-  &:last-of-type {
-    padding-bottom: 0;
-  }
+    display: flex;
+    justify-content: space-between;
+    padding: 12px 0;
 
-  .right-column {
-    flex: auto;
-    padding-left: 4px;
-
-    .localized-datetime {
-      font-weight: $font-weight-bold;
-      margin-bottom: 8px;
+    &:last-of-type {
+      padding-bottom: 0;
     }
 
-    .heading {
-      font: -apple-system-body;
-      line-height: 1.5;
-      font-weight: $font-bold;
-      color: theme-color("dark");
+    .right-column {
+      flex: auto;
+      padding-left: 4px;
 
-      a {
-        font-weight: $font-semibold;
+      .localized-datetime {
+        font-weight: $font-weight-bold;
+        margin-bottom: 8px;
       }
-    }
 
-    .description {
-      margin-bottom: 0;
-      display: inline-block;
-    }
+      .heading {
+        font: -apple-system-body;
+        line-height: 1.5;
+        font-weight: $font-bold;
+        color: theme-color("dark");
 
-    .heading, .description {
-      font-size: 0.9rem;
-    }
+        a {
+          font-weight: $font-semibold;
+        }
+      }
 
-    .date-summary-link {
-      font-weight: $font-semibold;
+      .description {
+        margin-bottom: 0;
+        display: inline-block;
+      }
 
-      a {
-        color: $link-color;
+      .heading,
+      .description {
         font-size: 0.9rem;
       }
-    }
-  }
 
-  .date {
-    color: theme-color("dark");
-    font: -apple-system-body;
+      .date-summary-link {
+        font-weight: $font-semibold;
+
+        a {
+          color: $link-color;
+          font-size: 0.9rem;
+        }
+      }
+    }
+
+    .date {
+      color: theme-color("dark");
+      font: -apple-system-body;
+    }
   }
 }
 
diff --git a/openedx/features/course_experience/templates/course_experience/dates-summary.html b/openedx/features/course_experience/templates/course_experience/dates-summary.html
index 97ac0ea361..e146278329 100644
--- a/openedx/features/course_experience/templates/course_experience/dates-summary.html
+++ b/openedx/features/course_experience/templates/course_experience/dates-summary.html
@@ -2,26 +2,28 @@
 from django.utils.translation import ugettext as _
 %>
 <%page args="course_date" expression_filter="h"/>
-<div class="date-summary date-summary-${course_date.css_class}">
-    <div class="left-column">
-        <span class="icon fa fa-calendar" aria-hidden="true"></span>
-    </div>
-    <div class="right-column">
-        % if course_date.date:
-            <p class="hd hd-6 date localized-datetime" data-format="shortDate" data-datetime="${course_date.date}" data-timezone="${user_timezone}" data-language="${user_language}"></p>
-        % endif
-        % if course_date.title_html:
-            <div class="hd hd-6 heading">${course_date.title_html}</div>
-        % elif course_date.title:
-            <div class="hd hd-6 heading">${course_date.title}</div>
-        % endif
-        % if course_date.description:
-            <p class="description">${course_date.description}</p>
-        % endif
-        % if course_date.link and course_date.link_text:
-            <div class="date-summary-link">
-                <a href="${course_date.link}">${course_date.link_text}</a>
-            </div>
-        % endif
+<div class="date-summary-container">
+    <div class="date-summary date-summary-${course_date.css_class}">
+        <div class="left-column">
+            <span class="icon fa fa-calendar" aria-hidden="true"></span>
+        </div>
+        <div class="right-column">
+            % if course_date.date:
+                <p class="hd hd-6 date localized-datetime" data-format="shortDate" data-datetime="${course_date.date}" data-timezone="${user_timezone}" data-language="${user_language}"></p>
+            % endif
+            % if course_date.title_html:
+                <div class="hd hd-6 heading">${course_date.title_html}</div>
+            % elif course_date.title:
+                <div class="hd hd-6 heading">${course_date.title}</div>
+            % endif
+            % if course_date.description:
+                <p class="description">${course_date.description}</p>
+            % endif
+            % if course_date.link and course_date.link_text:
+                <div class="date-summary-link">
+                    <a href="${course_date.link}">${course_date.link_text}</a>
+                </div>
+            % endif
+        </div>
     </div>
 </div>