ARTICLE AD BOX
The issue is 1fr. It forces the second column to eat all the remaining space, and your text-align: center is pushing the text into the middle of that empty void.
Switch to Flexbox. It’s much better for "shrink-wrapping" content inside buttons.
.button {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 5px;
background: yellow;
/* This ensures the button grows to fit the text on one line */
width: max-content;
/* Prevents it from getting too huge on big screens */
max-width: 200px;
}
.text {
text-align: left;
}
<div class="button">
<div class="icon">
+
</div>
<div class="text">
Some content
</div>
</div>
