CSS - выберите каждый последний элемент в строке и примените маржу

Question

У меня есть следующий дизайн:

и каждый раз, когда я нахожу вложение, я могу удалить его:

Иногда, когда у меня много вложений, и я парю вложение, строка становится слишком длинной, а последнее вложение в строке переходит на следующий ряд.

Я попытался найти его в Google и нашел использование (nth-last (4n)), но я не знаю, сколько предметов у меня в каждой строке.

Я думал о чем-то вроде этого:

last-child-in-a-row { margin-right: 10px; }

Итак, в этом случае у меня будет достаточно места для растущего элемента x.

Есть ли какие-либо предлагаемые обходные пути / лучшие практики для этого?

EDIT:

HTML (от React):

<div class="attachmentHolder">
  <button class="attachmentButton">
    <svg class="leftAttachment" ... />
    <a ...> some text </a>
    <svg class="attachmentClose" ... />
  </button>
  <button class="attachmentButton">
    <svg class="leftAttachment" ... />
    <a ...> some text 2 </a>
    <svg class="attachmentClose" ... />
  </button>
  ...
  ...
</div>

CSS:

.attachmentHolder {
  display: flex;
  flex-wrap: wrap;
}

.attachmentButton {
  padding-right: 0;
  padding-left: 6px;
  margin: 0 8px 10px 0;

  .attachmentClose {
    max-width: 0;
    transition: max-width .1s ease-out, margin-left .1s ease-out;
  }

  &:hover {
    .attachmentClose {
      max-width: 25px;
      margin-left: 8px;
      margin-right: 8px;
      fill: $secondary;
    }
  }
}


.leftAttachment {
  height: 20px;
  width: 15px;
  margin: 0 4px 3px 0;
}