style index card title/tag for proper vertical spacing when wrapped

src/components/index-card/__tests__/__snapshots__/index-card.test.js.snap

@@ -27,21 +27,21 @@ exports[`index-card Basic use as a product card with links renders as expected 1
           className="flex flex--center-cross"
         >
           <h3
-            className="txt-fancy txt-l mb12"
+            className="txt-fancy txt-l mb-neg6 flex flex--wrap flex--center-cross mb12"
             style={
               Object {
                 "fontSize": 18,
                 "lineHeight": "18px",
               }
             }
           >
-            <span
-              className="mr6"
+            <div
+              className="mr6 mb6 txt-nowrap"
             >
               Mapbox GL JS
-            </span>
+            </div>
             <div
-              className="inline-block mr6 relative"
+              className="inline-block mr6 mb6 relative txt-nowrap"
               style={
                 Object {
                   "top": -2,
@@ -192,19 +192,19 @@ exports[`index-card Use as a help section card renders as expected 1`] = `
               </svg>
             </div>
             <h3
-              className="txt-fancy txt-l"
+              className="txt-fancy txt-l mb-neg6 flex flex--wrap flex--center-cross"
               style={
                 Object {
                   "fontSize": 18,
                   "lineHeight": "18px",
                 }
               }
             >
-              <span
-                className="mr6"
+              <div
+                className="mr6 mb6 txt-nowrap"
               >
                 Tutorials
-              </span>
+              </div>
             </h3>
           </div>
           <p

src/components/index-card/index-card.js

@@ -72,17 +72,23 @@ const CardContent = ({
           </div>
         )}
         <h3
-          className={classnames('txt-fancy txt-l', {
-            mb12: !icon
-          })}
+          className={classnames(
+            'txt-fancy txt-l mb-neg6 flex flex--wrap flex--center-cross',
+            {
+              mb12: !icon
+            }
+          )}
           style={{
             fontSize: 18,
             lineHeight: '18px'
           }}
         >
-          <span className="mr6">{title}</span>
+          <div className="mr6 mb6 txt-nowrap">{title}</div>
           {tag && (
-            <div className="inline-block mr6 relative" style={{ top: -2 }}>
+            <div
+              className="inline-block mr6 mb6 relative txt-nowrap"
+              style={{ top: -2 }}
+            >
               {tag}
             </div>
           )}