Outside padding (yes, not margin) using `transform` 100%

[sanjarcode]

Goal

Situation

Suppose we are constrained, in that we don't have access to outside markup. To add this icon on the left (space is guaranteed), with a space ("outside padding"), I first make the icon position: absolute and constrain it within the input box (position: relative). This is easy.

For the "outside padding", a negative top/bottom/left/right won't work. See:

FYI: In this case, I know the icon width (24px) and the space between (8px). So setting left to -32px would solve the issue. But this solution wouldn't work if the icon (any element) width was unknown/dynamic.

Learning

Use the transform property (with translateX) and set the value -100% + spacing needed (8px) using calc. For the vertical centering, I'm using top:0; bottom:0 hack combined with center everything using flex.

Note: the solid black lines are outline, which I'm using to show grid lines.

[sanjarcode]

This is the first situation where I'm having to use transform for a static UI.