adding

dist/index.html

@@ -85,11 +85,11 @@
         <div class="grid">
             <div class="col-12">
                 <div class="bar">
-                    <div class="tab">
+                    <div class="tabs">
-                        <a class="tab__item">
+                        <a class="tabs__item">
                             Tab A
                         </a>
-                        <a class="tab__item">
+                        <a class="tabs__item">
                             Tab B
                         </a>
                     </div>

dist/plain-ui.css

@@ -943,21 +943,15 @@ img.media {
 }
 .bar__start {
   justify-content: start;
-  min-width: -webkit-max-content;
-  min-width: -moz-max-content;
-  min-width: max-content;
 }
 .bar__main {
   width: 100%;
 }
 .bar__end {
-  text-align: right;
+  justify-content: end;
-  margin-left: 0.75em;
-  min-width: -webkit-max-content;
-  min-width: -moz-max-content;
-  min-width: max-content;
 }
 .bar__start, .bar__main, .bar__end {
+  display: flex;
   align-self: center;
   margin-left: 0.75em;
 }
@@ -965,12 +959,19 @@ img.media {
   margin-right: 0.75em;
 }
 
-.tab {
+.tabs {
-  display: flex;
+  display: block;
+  width: 100%;
+}
+@media only screen and (min-width: 768px) {
+  .tabs {
+    display: flex;
+    width: auto;
+  }
 }
-.tab__item {
+.tabs__item {
   height: 100%;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   padding: 0 1em;
   background-color: white;
@@ -978,11 +979,23 @@ img.media {
   background-color: white;
   color: #3e3e3e;
   border: 1px solid #3e3e3e;
-  border-right: 0;
+  border-bottom-width: 0;
+  width: 100%;
 }
-.tab__item:hover, .tab__item--selected {
+@media only screen and (min-width: 768px) {
+  .tabs__item {
+    width: auto;
+    display: inline-flex;
+    border-right-width: 0;
+    border-bottom-width: 1px;
+  }
+}
+.tabs__item:hover, .tabs__item--selected {
   cursor: pointer;
   background-color: #585858;
   color: white;
   border-color: #585858;
 }
+.tabs__item:last-child {
+  border-bottom-width: 1px;
+}

src/scss/components/_bar.scss

@@ -20,7 +20,6 @@
 
         &__start {
             justify-content: start;
-            min-width: max-content;
         }
 
         &__main {
@@ -28,12 +27,11 @@
         }
 
         &__end {
-            text-align: right;
+            justify-content: end;
-            margin-left: 0.75em;
-            min-width: max-content;
         }
 
         &__start, &__main, &__end {
+            display: flex;
             align-self: center;
             margin-left: 0.75em;
 

src/scss/components/_tabs.scss

@@ -4,15 +4,21 @@
  *
  */
 
-@mixin plain-ui__component__tab()
+@mixin plain-ui__component__tabs()
 {
-    .tab {
+    .tabs {
-        display: flex;
+        display: block;
+        width: 100%;
+
+        @include plain-ui__media-sm() {
+            display: flex;
+            width: auto;
+        }
 
         &__item {
             height: 100%;
 
-            display: inline-flex;
+            display: flex;
             align-items: center;
             padding: 0 1em;
 
@@ -23,7 +29,16 @@
             color: $plain-ui__primary-light;
 
             border: 1px solid $plain-ui__primary-light;
-            border-right: 0;
+            border-bottom-width: 0;
+
+            width: 100%;
+
+            @include plain-ui__media-sm() {
+                width: auto;
+                display: inline-flex;
+                border-right-width: 0;
+                border-bottom-width: 1px;
+            }
 
             &:hover, &--selected {
                 cursor: pointer;
@@ -32,6 +47,10 @@
 
                 border-color: lighten($plain-ui__primary-light, 10%);
             }
+
+            &:last-child {
+                border-bottom-width: 1px;
+            }
         }
     }
 }

src/scss/plain-ui.scss

@@ -36,4 +36,4 @@
 @include plain-ui__component__hero();
 @include plain-ui__component__slider();
 @include plain-ui__component__bar();
-@include plain-ui__component__tab();
+@include plain-ui__component__tabs();