Improving Layout

src/main/webapp/app/exercise/exercise-card/exercise-card.component.html

 <div *ngIf="exercise" style="height: 100%">
-  <div class="card {{ hasChildren() ? 'cardForComponent' : '' }}">
+  <div class="card {{ hasChildren() ? 'cardForCollection' : '' }}">
     <jhi-review-badge *ngIf="exercise.searchStatistics?.badgeRewarded"></jhi-review-badge>
     <div class="card-body" style="display: flex; flex-direction: column">
       <img
@@ -19,7 +19,6 @@
         "
       />
       <h5 class="card-title">{{ exercise.metadata.title }}</h5>
-      <p *ngIf="hasChildren()" class="collection-info" jhiTranslate="exercise.collection">Collection</p>
       <p class="card-text">{{ exercise.metadata.description }}</p>
 
       <div style="margin-top: auto; width: 100%; padding-left: 30px; padding-right: 30px">
@@ -29,6 +28,7 @@
           <div style="float: left">
             <p class="card-text" jhiTranslate="exercise.details.rating"></p>
           </div>  -->
+          <div *ngIf="hasChildren()" class="collection-info" jhiTranslate="exercise.collection">Collection</div>
           <div class="star-container">
             <span
               class="star"

src/main/webapp/app/exercise/exercise-card/exercise-card.component.scss

@@ -5,7 +5,8 @@
   height: 100%;
 }
 
-.cardForComponent {
+.cardForCollection {
+  background-color: rgb(236, 236, 236);
   border: 3px solid rgba(0, 0, 0, 0.5);
   border-style: double;
 }
@@ -14,19 +15,6 @@
   padding-bottom: 15px;
 }
 
-.collection-info {
-  font-size: 0.5rem;
-  margin-bottom: 0.1rem;
-  text-align: left;
-  color: white;
-  background-color: red;
-  padding-left: 3px;
-  padding-right: 3px;
-  width: fit-content;
-  border-width: 2px;
-  border-radius: 0.2rem;
-}
-
 .card-text {
   text-align: left;
 }
@@ -48,3 +36,18 @@
 .star-unmarked {
   color: #ccc;
 }
+
+.collection-info {
+  float: left;
+  font-size: 0.5rem;
+  vertical-align: middle;
+  text-align: left;
+  color: white;
+  background-color: red;
+  margin: 7px;
+  padding-left: 3px;
+  padding-right: 3px;
+  width: fit-content;
+  border-width: 2px;
+  border-radius: 0.2rem;
+}