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. Unlike another post on Stack Overflow, I have to keep those .flex-divider divs and can’t convert to ul li tags, like in a similar post.

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

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?

Here’s what I have so far for my HTML:

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

CSS

.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;
  }
}