fix(tabs): properly align tabs highlight (#11619)

When `Tabs` are nested within each other, the highlight can get
misaligned. This prevents that by ensuring the affected
`.tab-highlight` is a direct child of the targeted `Tabs`.

Author: dudeofawesome

src/components/tabs/tabs.md.scss

@@ -302,7 +302,7 @@ $tabs-md-tab-icon-size:                       2.4rem !default;
   transition-duration: 300ms;
 }
 
-.tabs-md[tabsHighlight=true][tabsPlacement=bottom] .tab-highlight {
+.tabs-md[tabsHighlight=true][tabsPlacement=bottom] > .tabbar > .tab-highlight {
   top: 0;
 }