Merge pull request #14640 from edx/aj/TNL-6620_action_style

Updating the notification to remove overlap of action bar buttons

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -898,18 +898,13 @@ div.problem .action {
   margin-top: $baseline;
   min-height: $baseline;
   width: 100%;
+  display: flex;
+  display: -ms-flexbox;
+  -ms-flex-align: start;
   flex-direction: row;
   align-items: center;
   flex-wrap: wrap;
 
-  .problem-action-buttons-wrapper {
-
-    @media (min-width: $bp-screen-lg) {
-      @include text-align(right);
-      @include float(right);
-    }
-  }
-
   .problem-action-button-wrapper {
     @include border-right(1px solid $light-gray1);
     display: inline-block;
@@ -935,7 +930,8 @@ div.problem .action {
   }
 
   .submit-attempt-container {
-    display: inline-flex;
+    padding-bottom: $baseline;
+    flex-grow: 1;
 
     @media (max-width: $bp-screen-lg) {
       max-width: 100%;
@@ -944,12 +940,14 @@ div.problem .action {
     .submit {
       @include margin-right($baseline / 2);
       @include float(left);
+      white-space: nowrap;
     }
   }
 
   .submission-feedback {
-    display: inline-block;
+    @include margin-right($baseline / 2);
     margin-top: $baseline / 2;
+    display: inline-block;
     color: $gray-d1;
     font-size: $medium-font-size;
     -webkit-font-smoothing: antialiased;
@@ -1027,6 +1025,7 @@ div.problem {
   }
 
   .notification {
+    @include float(left);
     margin-top: $baseline / 2;
     padding: ($baseline / 2.5) ($baseline / 2) ($baseline / 5) ($baseline / 2);
     line-height: $base-line-height;