JSFiddle - React, Tailwind, and code Playground

HTML

resize smaller: (or <button>toggle</button>)
<div class="container">
  <ul class="breadcrumbs">
    <li class="breadcrumbs__crumb"><a href="#">1. Primary Item</a></li>
    <li class="breadcrumbs__crumb"><a href="#">2. Secondary Item</a></li>
    <li class="breadcrumbs__crumb"><a href="#">3. Tertiary Item</a></li>
  </ul>    
</div>

CSS

body, html { padding:0; margin:0; font-size:16px; line-height:24px }
a { text-decoration:none;  margin:0 1em; border-bottom:1px solid grey; }

.breadcrumbs {
    list-style: none;
    height: 24px;
    overflow: hidden;

    /* direction: rtl; */
    /* flex-direction: row-reverse; */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.breadcrumbs_crumb {
  /* display: inline-block; */
  /* float: right; */
  flex: 0 0 100%;
  white-space: nowrap;
}





.container {
  max-width: 640px;
  margin: 0 auto;
  background: rgba(255,255,255, 0.5);
  border-left: 1px solid red;
  border-right: 1px solid red;
}
.container--small { 
  max-width: 400px;
}

JavaScript

var button = document.querySelector('button');
var container = document.querySelector('.container');

button.addEventListener('click', function() {
  container.classList.toggle('container--small');
});