bind:clientHeight grows endlessly - html

Question

I've created the following layout:
desktop: two columns
mobile: one column
There are 4 grey cards and one (the first) red. The dimensions of the grey cards depends on their content, the red one whould have the same height of the near card. To compure the size, I used svelte bind:clientWidth and bind:clientHeight.
It works but for some reason I needed to create a relative and then an absolute div, otherwise height grows endlessly.
So, this works perfectly on desktop (2 columns) but obviously not on mobile because of the absolute div.
Here the demo and below some relevant code:
<script>
let containerWidth = 0;
let containerHeight = 0;
$: width = containerWidth;
$: height = containerHeight;
</script>
<div class="col-12 col-md-6 mb-3 border">
<div
class="position-relative w-100 h-100 p-3"
bind:clientWidth={containerWidth}
bind:clientHeight={containerHeight}
style="width: {width}px; height: {height}px; background-color: red"
>
<div
class="position-absolute top-0 start-0"
style="width: {width}px; height: {height}px; background-color: #f7f9fa"
>
<div
class="d-flex justify-content-center align-items-center"
style="width: {width}px; height: {height}px; background-color: red"
>
</div>
</div>
</div>
</div>
In that case the red card has small height, it should have height = 150px but how can I do that?
On mobile probably is not necessary to bind height... How can I avoid to use relative/absolute to get the right dimensions of a div?