Flexbox align items horizontally on one row – Shopify

We use Shopify and in the past a dev has created a custom tabs class for us. Unfortunately, he’s no longer with us and I’m trying to modify it myself – without success. I’m a complete noob when it comes to flexbox & scss.

Here’s the scss:

 ul.tabbies {
  @extend %block;
  @include overflow-touch;
  @extend %unselectable;
  @include flexbox();
  @include flex-grow(1);
  @include flex-shrink(0);
  @include justify-content(flex-start);
  @include align-items(stretch);

  border-bottom-color: $tabs-border-bottom-color;
  border-bottom-style: $tabs-border-bottom-style;
  border-bottom-width: $tabs-border-bottom-width;

  padding-left: 0;
  margin-left: 0;
  
  flex-direction: row;
  flex-wrap: wrap;

  a {
    height: calc(100% + 1px);
    align-items: flex-start;
  }
  
  
  a {
    @include align-items(center);
    border-bottom-color: $tabs-border-bottom-color;
    border-bottom-style: $tabs-border-bottom-style;
    border-bottom-width: $tabs-border-bottom-width;
    color: $tabs-link-color;
    @include flexbox();
    @include justify-content(center);
    margin-bottom: -#{$tabs-border-bottom-width};
    padding: $tabs-link-padding;
    padding-left: 0;
    vertical-align: top;

    &:hover {
      border-bottom-color: $tabs-link-hover-border-bottom-color;
      color: $tabs-link-hover-color;
    }
  }

  li {
    display: block;
    margin-top: 0.25em;
    width: min-intrinsic;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: table-caption;
    display: -ms-grid;
    -ms-grid-columns: min-content;

    &.active,
    &.is-active {
      a {
        border-bottom-color: $tabs-link-active-border-bottom-color;
        color: $tabs-link-active-color;
      }
    }

    a.active,
    a.is-active {
      border-bottom-color: $tabs-link-active-border-bottom-color;
      color: $tabs-link-active-color;

      * {
        color: $tabs-link-active-color;// Used to ensure headings get proper color set
      }
    }
  }
}

I’m using html on the page to hard-code the tab structure e.g.

<!--Start tab labels-->
<ul class="tabbies">
<li><a class="active" href="https://balletassociation.myshopify.com/pages/reports-2001-alina-cojocaru">2001</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2002-deborah-bull">2002</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2003-gemma-bond">2003</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2004-caroline-duprot">2004</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2005-roberto-bolle">2005</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2006-zoe-anderson">2006</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2007-johanna-adams">2007</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2008-deborah-bull">2008</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2009-federico-bonelli">2009</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2010-vanessa-fenton">2010</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2011-camille-bracher">2011-2020</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2020-jessica-clarke">2020-2030</a></li>
</ul>
<ul class="tabbies">
<li><a class="active" href="https://balletassociation.myshopify.com/pages/reports-2001-alina-cojocaru">Alina Cojocaru</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2001-gailene-stock">Gailene Stock</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2001-hubert-essakow">Hubert Essakow</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2001-jenny-tattersall">Jenny Tattersall</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2001-jenny-tattersall">Tom Sapsford</a></li>
</ul>
<!--End tab labels-->

Here’s a link to the page https://balletassociation.co.uk/pages/reports-2001-alina-cojocaru

What I’m trying to achieve is the top row all on a single line i.e. 2011-2020, 2021-2030 and not displayed on top of each other.
The bottom row is correct, with the dancer’s name on two rows.

Is it possible to do this? If so, can you point me in the right direction as everything I’ve tried so far has failed.

Thank you in advance