diff --git a/app/assets/javascripts/select-kit/templates/components/period-chooser/period-chooser-row.hbs b/app/assets/javascripts/select-kit/templates/components/period-chooser/period-chooser-row.hbs
index 19d2d702fda..549bf273354 100644
--- a/app/assets/javascripts/select-kit/templates/components/period-chooser/period-chooser-row.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/period-chooser/period-chooser-row.hbs
@@ -1 +1,5 @@
-{{period-title value showDateRange=true}}
+<span class="selection-indicator"></span>
+
+<span class="period-title">
+  {{period-title value showDateRange=true}}
+</span>
diff --git a/app/assets/stylesheets/common/select-kit/period-chooser.scss b/app/assets/stylesheets/common/select-kit/period-chooser.scss
index e71fd33137f..3994057f830 100644
--- a/app/assets/stylesheets/common/select-kit/period-chooser.scss
+++ b/app/assets/stylesheets/common/select-kit/period-chooser.scss
@@ -49,6 +49,12 @@
         padding: 5px;
         color: #222;
         font-size: $font-up-1;
+        align-items: center;
+        display: flex;
+
+        .period-title {
+          flex: 1;
+        }
 
         .top-date-string {
           font-weight: normal;
diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss
index c845b1d2b1b..60b116b3736 100644
--- a/app/assets/stylesheets/common/select-kit/select-kit.scss
+++ b/app/assets/stylesheets/common/select-kit/select-kit.scss
@@ -95,9 +95,9 @@
 
     .selected-name {
       text-align: left;
-      -webkit-box-flex: 10;
-          -ms-flex: 10;
-              flex: 10;
+      -webkit-box-flex: 1 100%;
+              -ms-flex: 1 100%;
+                  flex: 1 100%;
       -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
       white-space: nowrap;