Adding a new div to hold the shrink button.

src/components/cards/card.css

@@ -104,6 +104,25 @@
     font-weight: bold;
 }
 
+.header-buttons-right {
+    display: flex;
+    flex-direction: row;
+}
+
+.shrink-button {
+    cursor: pointer;
+    color: white;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 0.75rem;
+}
+
+.shrink-button:hover, .all-button:hover {
+    background-color: $ui-black-transparent;
+}
+
 .remove-button, .all-button {
     cursor: pointer;
     color: white;

src/components/cards/cards.jsx

@@ -41,19 +41,24 @@ const CardHeader = ({onCloseCards, onShowAll, totalSteps, step}) => (
                     ))}
             </div>
         ) : null}
-        <div
-            className={styles.removeButton}
-            onClick={onCloseCards}
-        >
-            <FormattedMessage
-                defaultMessage="Close"
-                description="Title for button to close how-to card"
-                id="gui.cards.close"
-            />
-            <img
-                className={styles.closeIcon}
-                src={closeIcon}
-            />
+        <div className={styles.headerButtonsRight}>
+            <div className={styles.shrinkButton}>
+                {'Shrink'}
+            </div>
+            <div
+                className={styles.removeButton}
+                onClick={onCloseCards}
+            >
+                <FormattedMessage
+                    defaultMessage="Close"
+                    description="Title for button to close how-to card"
+                    id="gui.cards.close"
+                />
+                <img
+                    className={styles.closeIcon}
+                    src={closeIcon}
+                />
+            </div>
         </div>
     </div>
 );