JSFiddle - React, Tailwind, and code Playground

by Amens

HTML

<div class="container">
  <div>testeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div>
  <div>test2 dsdfsdfsdfsdfsdf<br>dsadasdasdsa</div>
  <div>test3</div>
  <div class="narrow">test4</div>
  <div>test5</div>
</div>

SCSS

$breakpoints: (
    "phone":        400px,
    "phablet":      560px,
    "tablet":       768px,
    "tablet-wide":  1024px,
    "desktop":      1248px,
    "desktop-wide": 1440px
);
@mixin mq($width, $type: min) {
    @if map_has_key($breakpoints, $width) {
        $width: map_get($breakpoints, $width);
        @if $type == max {
            $width: $width - 1px;
        }
        @media only screen and (#{$type}-width: $width) {
            @content;
        }
    }
}

$z-index: (
  nav:     100,
  overlay: 200,
  popup:   300
);

@function z-index($key) {
  @return map-get($z-index, $key);
}

@mixin z($key) {
  z-index: z-index($key);
}

div {
  display: flex;
  box-sizing: border-box;
}

.container {
  flex-wrap: wrap;
  align-items: center;
  align-content: stretch;
  justify-content: space-between;
}

.container > div {
  width: 100%;
  padding: 10px;
  margin: 10px;
  flex-grow: 1;
  height: auto;
  
  @include mq(phablet, min) {
    width: auto;
    &.narrow {
      flex-grow: 0;
    }
  }
}

// ===========
.container > div {background: #CCC; @include mq(phablet, min){background: red;}}
.container > .narrow {background: blue;}