CSS - Select each last item in a row and apply margin - html

Question

I have the following design:
and each time I hover an attachment, I have the ability to delete it:
Sometimes, when having many attachments and I hover an attachment the row is too long and the last attachment in the row jumps to the next row.
I tried to google it and found the usage of (nth-last(4n)) but I don't know how many items i have in each row.
I thought about something like this:
last-child-in-a-row { margin-right: 10px; }
So, in that case i will have enough space for the growing x element.
Is there any suggested workaround/best-practice for this?
EDIT:
HTML (rendered from 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;
}