CSS - transform: scale() irrespective of element size - css

Question

Is there a way to apply a transform: scale() to an element (or something similar, although ideally it should be able to be safely animated) which would make the element appear larger, however "ignore" the element's size (obviously this isn't exactly what I mean, keep reading).
Here is an example of what I mean.
Essentially the idea is to make the 2 differently size elements appear to scale in the same way, despite being 2 different sizes. It should be noted that the elements aren't going to be fixed width and will inherit the size of their container (whose width is also indeterminate).

Answer 1

Update
Thanks #TemaniAfif, the solution can be optimized further by manipulating the left and right margin instead of width.
.small {
width: 100px;
margin: 10px;
background-color: #1abc9c;
}
.large {
width: 900px;
margin: 10px;
background-color: #3498db;
}
.target {
background-color: inherit;
}
.target:hover {
margin: 0 -12px;
transform: scaleY(1.2);
transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
}
<div class="small">
<div class="target">Small</div>
</div>
<div class="large">
<div class="target">Large</div>
</div>
Original Answer
The scale function resizes the element by multiplication, but you need a constant enlargement on the variant x-axis. Instead use scale, using calc on width of a proxy element (.target) to add the constant pixel when the element needs to be enlarged. By enlarging width, the position of the element also needs an offset to make it grows to left, so set the left to a negative number which is a half of the total enlargement. Since heights of the two elements are the same, using scaleY to scale them is ok.
.small {
width: 100px;
margin: 10px;
background-color: #1abc9c;
}
.large {
width: 900px;
margin: 10px;
background-color: #3498db;
}
.target {
position: relative;
left: 0;
width: 100%;
background-color: inherit;
}
.target:hover {
left: -12px;
width: calc(100% + 24px);
transform: scaleY(1.2);
transition: transform 0.3s ease-in-out, left 0.3s ease-in-out, width 0.3s ease-in-out;
}
<div class="small">
<div class="target">Small</div>
</div>
<div class="large">
<div class="target">Large</div>
</div>