avoids qualifying elements in selectors

app/assets/stylesheets/participation.scss

@@ -528,7 +528,7 @@
   }
 }
 
-.tab-milestones ul div {
+.tab-milestones ul .milestone-content {
   position: relative;
   padding: rem-calc(3) rem-calc(10);
 
@@ -537,7 +537,7 @@
     margin-bottom: 0;
   }
 
-  strong {
+  .milestone-date {
     color: $text-medium;
     font-size: 0.9rem;
   }
@@ -546,7 +546,8 @@
 .tab-milestones .timeline ul li:nth-child(odd),
 .tab-milestones .timeline ul li:nth-child(even) {
 
-  div {
+  .milestone-content {
+
     @include breakpoint(medium) {
       width: rem-calc(300);
     }
@@ -558,7 +559,8 @@
 }
 
 .tab-milestones .timeline ul li:nth-child(odd) {
-  div {
+
+  .milestone-content {
     text-align: right;
 
     @include breakpoint(medium) {
@@ -572,7 +574,8 @@
 }
 
 .tab-milestones .timeline ul li:nth-child(even) {
-  div {
+
+  .milestone-content {
     left: rem-calc(15);
   }
 }
@@ -585,7 +588,8 @@
 
       &:nth-child(odd),
       &:nth-child(even) {
-        div {
+
+        .milestone-content {
           text-align: left;
           left: rem-calc(15);
         }

app/views/budgets/investments/_milestones.html.erb

@@ -10,9 +10,11 @@
         <ul class="no-bullet">
           <% @investment.milestones.each do |milestone| %>
             <li>
-              <div>
+              <div class="milestone-content">
                 <h3><%= milestone.title %></h3>
-                <strong><%= t("budgets.investments.show.milestone_publish_date", publish_date: milestone.created_at.strftime("%d/%m/%Y")) %></strong>
+                <span class="milestone-date">
+                  <strong><%= t("budgets.investments.show.milestone_publish_date", publish_date: milestone.created_at.strftime("%d/%m/%Y")) %></strong>
+                </span>
                 <p><%= milestone.description %></p>
               </div>
             </li>