diff --git a/website/client/src/components/tasks/modal-controls/selectDifficulty.vue b/website/client/src/components/tasks/modal-controls/selectDifficulty.vue
index feab956add..1dfc16c3c4 100644
--- a/website/client/src/components/tasks/modal-controls/selectDifficulty.vue
+++ b/website/client/src/components/tasks/modal-controls/selectDifficulty.vue
@@ -39,6 +39,7 @@
   .difficulty-item {
     display: flex;
     align-items: center;
+    width: 100%;
 
     div.svg-icon {
       ::v-deep svg {
diff --git a/website/client/src/components/ui/selectList.vue b/website/client/src/components/ui/selectList.vue
index 0e9230d178..c5607b1e60 100644
--- a/website/client/src/components/ui/selectList.vue
+++ b/website/client/src/components/ui/selectList.vue
@@ -58,11 +58,17 @@
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      padding-right: 25px; /* To allow enough room for the down arrow to be displayed */
     }
 
     .selectListItem {
       position: relative;
-      padding-right: 1.625rem;
+
+      .dropdown-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
 
       &:not(.showIcon) {
         .svg-icon.check-icon {
@@ -71,10 +77,7 @@
       }
 
       .svg-icon.check-icon.color {
-        position: absolute;
-        right: 0.855rem;
-        top: 0.688rem;
-        bottom: 0.688rem;
+        margin-left: 10px; /* So the flex item (checkmark) will have some spacing from the text */
         width: 0.77rem;
         height: 0.615rem;
         color: $purple-300;