How can I prevent line-wrapping only on hovered rows? - html

Question

If you hover over the "This is Broken!" tag, the adjacent "Damn" tag wraps to the next line. This is because the "This is Broken!" tag increased in size and is being constrained by the container.
Is it possible to prevent this wrapping?
The tags and parent container size are dynamic, so I can't easily group rows of tags together in a containing element that has the "white-space: nowrap" property. Any tag that is being hovered on or any adjacent tag can be the one that wraps to the next line. If possible, I would like to retain the same space between tags before-and-after hover.
main {
width: 160px;
}
.material-tag-wrapper {
margin: 1px 3px 1px 0;
display: inline-block;
}
.material-tag-wrapper.closeable:hover .material-tag {
padding-right: 26px;
}
.material-tag-wrapper.closeable:hover .material-tag-remove {
opacity: 1;
padding-right: 10px;
}
.material-tag {
background-color: blue;
color: white;
font-weight: 400;
cursor: pointer;
border-radius: 3px;
padding: 2px 8px;
text-transform: uppercase;
font-size: 10px;
transition: .1s all;
display: inline-block;
position: relative;
text-align: center;
}
.material-tag-remove {
color: #3C4858;
cursor: pointer;
font-size: .8em;
position: absolute;
top: 4px;
right: 0;
opacity: 0;
text-align: right;
text-decoration: none;
width: 100%;
z-index: 2;
}
.material-tag-remove:before {
content: "x";
color: white;
}
<main>
<div class="material-tag-wrapper closeable">
<div class="material-tag">
Beautiful
<div class="material-tag-remove"></div>
</div>
</div>
<div class="material-tag-wrapper closeable">
<div class="material-tag">
Works
<div class="material-tag-remove"></div>
</div>
</div>
<div class="material-tag-wrapper closeable">
<div class="material-tag">
This is Broken!
<div class="material-tag-remove"></div>
</div>
</div>
<div class="material-tag-wrapper closeable">
<div class="material-tag">
Damn
<div class="material-tag-remove"></div>
</div>
</div>
<div class="material-tag-wrapper closeable">
<div class="material-tag">
I Work!
<div class="material-tag-remove"></div>
</div>
</div>
</main>

Answer 1

Since you add padding-right: 26px; to material-tag-wrapper:hover, you could apply the same rule for main (or any wrapper you choose):
main:hover {
width: 186px; /* base width of 160px + 26px */
}