fix(Tabs & Tabs extended with media): adjust the layout to align with…

… the defined grid (#8394)

### Related Ticket(s)

[[Tabs & Tabs extended with media]: Not on grid](#7815)

### Description

1. Tabs extended media: Contents of the component are not aligned to Carbon grid. 

**Current Canary web components:**
![image](https://user-images.githubusercontent.com/15144993/144798385-d6124585-b78e-41e9-bffd-59e5fb3c9ca7.png)

**Expecting:**
![image](https://user-images.githubusercontent.com/15144993/144798590-8d961cc2-1831-4fbf-a085-4e13a63182d4.png)

**Updated:**
<img width="1354" alt="Screen Shot 2022-03-02 at 9 12 59 PM" src="https://user-images.githubusercontent.com/384598/156500707-700bd07c-07c5-4662-913e-6089ee6c317c.png">


2. For Tabs extended, the individual tabs should be 2 columns wide. 

**Current:** 
![image.png](https://images.zenhubusercontent.com/5be09c3a6102900c6d16d991/52368160-9d5e-49cf-bd6d-0c490eb83840)

**Expecting:**
![image.png](https://images.zenhubusercontent.com/5be09c3a6102900c6d16d991/6d77531e-9c89-455f-a572-634aaf66ed0b)

**Updated:**
<img width="1354" alt="Screen Shot 2022-03-02 at 9 12 29 PM" src="https://user-images.githubusercontent.com/384598/156500747-a3c42fb8-3079-4e6a-9e2b-497b008863b7.png">

### Notes

As of this first pass, there are still some differences between the specs and the results, notably:

1. Tabs Extended with Media
    - The tab contents' image and text are not aligned to the grid
    - Some of the vertical margins of the tab contents are different
2. Tabs Extended
    - The tabs' text is not bottom aligned when they have multiple lines
    - The tab contents' text and cta block have some left misalignment due to inherited styles from the component it's using, Content Block Media

I am unsure if the scope of this ticket includes addressing the above.

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/styles/scss/components/tabs-extended-media/_tabs-extended-media.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2021
+ * Copyright IBM Corp. 2016, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -15,8 +15,9 @@
 @mixin tabs-extended-media {
   :host(#{$dds-prefix}-tabs-extended-media) {
     margin: 0;
-    grid-column: 1 / span 16;
+    display: flex;
     overflow-x: hidden;
+
     @include carbon--breakpoint(sm) {
       padding-top: $carbon--spacing-07;
       padding-bottom: $carbon--spacing-12;
@@ -27,50 +28,38 @@
     }
 
     ::slotted([slot='heading']) {
-      grid-column: 1 / span 1;
-      grid-row: 1;
       margin-bottom: $carbon--spacing-09;
-      margin-left: $carbon--spacing-05;
-      margin-right: $carbon--spacing-05;
+      padding-left: $carbon--spacing-05;
+      padding-right: $carbon--spacing-05;
+
       @include carbon--breakpoint(lg) {
         padding-top: var(--cds-spacing-04, 0.75rem);
-        margin-left: 0;
-        margin-right: 0;
       }
     }
 
     .#{$prefix}--tabs-extended-media {
-      display: grid;
-      column-gap: $carbon--spacing-07;
-      @include carbon--breakpoint(sm) {
-        grid-template-columns: repeat(1, 1fr);
-      }
       @include carbon--breakpoint(lg) {
-        grid-template-columns: repeat(4, 1fr);
+        display: flex;
       }
     }
 
-    .#{$prefix}--tabs-extended {
-      @include carbon--breakpoint(sm) {
-        grid-column: 1 / span 1;
-        grid-row: 2;
-      }
+    .#{$prefix}--heading {
       @include carbon--breakpoint(lg) {
-        grid-column: 2 / span 3;
-        grid-row: 1;
+        flex: 0 0 25%;
       }
     }
 
     .#{$prefix}--tab-content {
-      padding: 0;
+      padding-left: $carbon--spacing-05;
+      padding-right: $carbon--spacing-05;
     }
 
     .#{$prefix}--accordion__content {
       margin-top: -$carbon--spacing-07;
       margin-bottom: $carbon--spacing-05;
       padding-bottom: 0;
-      padding-left: 0;
-      padding-right: 0;
+      padding-left: $carbon--spacing-05;
+      padding-right: $carbon--spacing-05;
 
       @include carbon--breakpoint(md) {
         margin-bottom: -$carbon--spacing-05;

packages/styles/scss/components/tabs-extended/_tabs-extended.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2021
+ * Copyright IBM Corp. 2016, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -26,7 +26,7 @@
 
       .#{$prefix}--tabs__nav-item {
         min-height: $spacing-09;
-        width: $spacing-13;
+        width: calc(100% / (12 / 2) - (#{$spacing-01} / 2));
         height: auto;
 
         p {
@@ -68,7 +68,7 @@
         border: initial;
         border-bottom: carbon--rem(2px) solid $ui-03;
         display: inline-flex;
-        width: $spacing-13;
+        width: 100%;
         text-align: left;
 
         &[hasTooltip] {

packages/web-components/src/components/tabs-extended-media/__stories__/tabs-extended-media.stories.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2021
+ * Copyright IBM Corp. 2020, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.