Selecting last divider element that has not wrapped [duplicate]

To preface this, we can’t alter the HTML so the dividers have to be inserted using the provided HTML as shown in the HTML below. We can’t use ul and li tags either.

I did a thorough search on Stack Overflow and other sites and there seems to be no way to select the last element that has not wrapped. For our particular case, I have the following HTML structure, which is dynamically rendered from a Sightly (HTL) page in a new AEM component we’re building, so I can’t make any modifications to the HTML. We’re stuck using the following structure, but can modify CSS and JS. We can also add/remove classes to the HTML below.

<div class="container">
  <div class="multi-cta-group">
    <a class="btn btn-primary">
      Button number one
    </a>
    <div class="flex-divider hide-sm"></div>
    <a class="btn btn-primary">
      Button number two
    </a>
    <div class="flex-divider hide-sm"></div>
    <a class="btn btn-primary">
      CTA button number three
    </a>
    <div class="flex-divider hide-sm"></div>
    <a class="btn btn-primary">
      Button number four
    </a>
    <div class="flex-divider hide-sm"></div>
  </div>
</div>

When the window width is too narrow to display all buttons in the same row, the last button will wrap underneath to the next line. When the window width is reduced even more, then two buttons might wrap to the next row. When that happens, there’s a trailing divider on the first row that needs to be hidden. How can I target the last divider on the first row, or on both rows, so that it can be hidden?

Unlike another post on Stack Overflow, which shows examples using ul li tags and the ‘before’ pseudo-element, this scenario involves using tags styled as Bootstrap buttons (btn btn-primary), which adds to the complexity. Because this is unlike the ul li question, we can’t seem to do the following:

1. Add dividers with the ‘before’ pseudo-element BETWEEN the buttons. They get inserted INTO the buttons.
2. Target the last element on the row before wrapping. Every solution we tried places the dividers inside the buttons.

Content editors can author in one to four buttons. I’m using simple CSS to hide the last divider, so that’s not an issue, but if there were a way to hide the last divider on each row, that might be a better approach.

Here’s the CSS I have so far:

.container {
  justify-content: center;
  margin: 16px auto;
  padding: 16px 0;
}
.multi-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.multi-cta-group a {
  color: #fff;
  justify-content: center;
}

.flex-divider {
  width: 1px;
  background-color: gray;
  height: auto;
}

.flex-divider:last-child {
  display: none;
}

.bg-gray-400 {
  background-color: #bdc2c7;
}

@media (max-width: 768px) {
  .multi-cta-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .multi-cta-group .btn {
    justify-content: center;
    width: auto;
  }
}

There are some other discussions on other sites and it seems there’s no way to select the last element before wrapping.

Desktop (Last divider element is after the four. This is hidden by CSS and is no problem.)

One | Two | Three | Four 

Large Tablet (The viewport (window width) at which this wraps could vary depending on the length of button text and the number of buttons, so we can’t use media queries. In the example below, we need to hide the divider line after the ‘Three’.)

One | Two | Three |
Four

Small Tablet (Below the divider line after the two needs to be removed or hidden.)

One | Two 
Three | Four

Mobile (Mobile is not an issue. We’re simply hiding all divider divs with a class called hide-sm.)

One
Two
Three
Four