diff --git a/src/course-home/progress-tab/grades/detailed-grades/ProblemScoreDrawer.jsx b/src/course-home/progress-tab/grades/detailed-grades/ProblemScoreDrawer.jsx
index b2995756..68018fc5 100644
--- a/src/course-home/progress-tab/grades/detailed-grades/ProblemScoreDrawer.jsx
+++ b/src/course-home/progress-tab/grades/detailed-grades/ProblemScoreDrawer.jsx
@@ -7,13 +7,15 @@ import messages from '../messages';
 
 function ProblemScoreDrawer({ intl, problemScores }) {
   return (
-    <span className="row w-100 m-0 x-small ml-4 pt-2 pl-1 text-gray-700">
-      <span id="problem-score-label">{intl.formatMessage(messages.problemScoreLabel)}</span>
-      <ul className="list-unstyled row m-0" aria-labelledby="problem-score-label">
-        {problemScores.map(problemScore => (
-          <li className="ml-3">{problemScore.earned}/{problemScore.possible}</li>
-        ))}
-      </ul>
+    <span className="row w-100 m-0 x-small ml-4 pt-2 pl-1 text-gray-700 flex-nowrap">
+      <span id="problem-score-label" className="col-auto p-0">{intl.formatMessage(messages.problemScoreLabel)}</span>
+      <div className="col p-0">
+        <ul className="list-unstyled row w-100 m-0" aria-labelledby="problem-score-label">
+          {problemScores.map(problemScore => (
+            <li className="ml-3">{problemScore.earned}/{problemScore.possible}</li>
+          ))}
+        </ul>
+      </div>
     </span>
   );
 }