Improve styling of exercise metadata

src/main/webapp/app/exercise/exercise-details/exercise-metadata/exercise-metadata-item/exercise-metadata-item.component.html

-<div *ngIf="value && value.length > 0" class="row">
+<div *ngIf="value && value.length > 0"
+     class="row exercise-metadata-item">
     <ng-container *ngIf="isArray(value)">
         <div *ngIf="value.length === 1"
-             class="col-4">
+             class="col-5 exercise-metadata-item-description">
             {{description + '.singular' | translate }}
         </div>
         <div *ngIf="value.length > 1"
-             class="col-4">
+             class="col-5 exercise-metadata-item-description">
             {{description + '.plural' | translate }}
         </div>
-        <div *ngIf="treatAsHTML" class="col-8" [innerHTML]="arrayToString(value)"></div>
-        <div *ngIf="!treatAsHTML" class="col-8">{{arrayToString(value)}}</div>
+        <div *ngIf="treatAsHTML"
+             class="col-7 exercise-metadata-item-value"
+             [innerHTML]="arrayToString(value)">
+        </div>
+        <div *ngIf="!treatAsHTML"
+             class="col-7 exercise-metadata-item-value">
+            {{arrayToString(value)}}
+        </div>
     </ng-container>
     <ng-container *ngIf="!isArray(value)">
         <div jhiTranslate="{{description}}"
-             class="col-4"></div>
-        <div class="col-8">{{value}}</div>
+             class="col-5 exercise-metadata-item-description"></div>
+        <div class="col-7 exercise-metadata-item-value">{{value}}</div>
     </ng-container>
 </div>

src/main/webapp/app/exercise/exercise-details/exercise-metadata/exercise-metadata-item/exercise-metadata-item.component.scss

+.exercise-metadata-item {
+  padding: 0px;
+}
+
+.exercise-metadata-item-description {
+  display: flex;
+  align-items: center;
+  padding: 3px;
+}
+
+.exercise-metadata-item-value {
+  padding: 3px;
+}