Django, Bootstrap responsive text area

I Wrote a little java script to make a text area responsive, depending on the image size next to it. That works pretty fine except of a weired random bug I really don't understand. This is how the page should look like:

That works in approx. 70% on the time, that the textarea is loaded with the correct hight. Every once and a while it happens that this happens:

If I refresh the page it directly takes the correct hight. Here is my code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h1 class="display-3 text-center">Willkommen auf</h1>
<h1 class="display-6 text-center">Diese Seite befindet sich im Aufbau</h1>
<div class="row">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12 my-3">
<div id="targetcard" class="card">
<img id="pic_uc" class="nav-item rounded" src="https://placehold.co/600x400"
alt=""></img>
<div class="card-img-overlay">
<a target="_blank" href="http://www.freepik.com"></a>
</div>
<div class="card-body">
<p class="card-text fs-6 fw-light lh-1">Designed by BiZkettE1 / Freepik</p>
</div>
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12 my-3">
<div id="textContentAre" class="card border-0 overflow-y-scroll">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur officiis iusto dolorum aspernatur
itaque sunt placeat veniam velit eius! Itaque molestias laborum repellat dicta doloribus? Unde atque
perferendis eaque architecto. Tempora sapiente accusantium iste libero qui fugiat consectetur laudantium
placeat ab explicabo inventore sunt modi facere a dolor, vitae at ratione! Explicabo nulla quasi
provident facilis repellendus esse deleniti tenetur eaque ratione perferendis sunt rerum amet
accusantium hic
temporibus quidem, laborum nemo blanditiis doloremque! Fugit eligendi atque illo. Molestiae modi ex
magnam id quaerat perferendis laboriosam illo repellat, in reiciendis! Rem voluptate quae fugit
doloremque
molestias unde ab necessitatibus perspiciatis, ipsa autem, voluptas commodi esse ex. Incidunt libero
dolores consequuntur distinctio sequi impedit voluptatibus, eum inventore, deserunt facere quidem error,
minima
sunt labore enim? Recusandae labore dignissimos libero ab asperiores maiores tenetur magnam, rerum
itaque
voluptate ipsa dolorum voluptatem officia in alias omnis! Animi incidunt, ipsa molestias a ut ducimus
consequuntur libero dicta expedita voluptatem fuga nam veniam facere ad pariatur voluptate autem sunt
reiciendis reprehenderit maiores. Nostrum, architecto. Veniam id facere suscipit aliquid vitae
consequuntur eum aspernatur quam magnam libero illo voluptate corporis iste pariatur consequatur, totam
eligendi
eveniet adipisci obcaecati qui architecto incidunt molestias mollitia fugiat. Laborum quod, sunt
perspiciatis
minima totam architecto quibusdam! Eligendi dignissimos eos ut? Maxime distinctio repellat non magnam
cupiditate beatae corrupti laboriosam deserunt quisquam ullam quam assumenda itaque dolores debitis
facere
exercitationem, officiis explicabo doloribus nobis. Error quibusdam ut suscipit in a. Nisi ad doloremque
ipsum sit tempore perferendis reiciendis accusamus tenetur facilis cupiditate molestias est autem ea
vero nostrum ipsa magnam, iste ipsam deserunt rem fugit. Quidem magnam recusandae doloribus dignissimos
ad
modi inventore sint labore saepe! Tenetur, neque hic ducimus quaerat odit maiores officiis nostrum
aliquid,
architecto ut perspiciatis qui adipisci quas. Ab, laudantium ratione. Cupiditate consequatur iure.
</div>
</div>
</div>
<div class="row">
<div class="col my-3 text-center">
<p class="text-muted">
Kontakt <a href="#" class="text-reset">Kontakt</a>.
</p>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
let height = document.querySelector("#targetcard").clientHeight;
document.querySelector('#textContentAre').style.height = height + "px";
window.addEventListener("resize", function () {
//console.log('View Port: ' + window.innerWidth)
if (height != document.querySelector("#targetcard").clientHeight) {
height = document.querySelector("#targetcard").clientHeight;
document.querySelector('#textContentAre').style.height = height + "px";
}
});
return false;
})
</script>

</div>
<!-- end snippet -->

If someone could tell me why the textare sometimes is loaded with the wrong hight I would be really thankful.

This can be done without any JavaScript.

Two col elements that display next to each other already automatically have the same height, due to the fact that Bootstrap 5 uses flexbox for its grid system.

So all we need to do here, is resolve the conflict that both of those columns are "competing" about which of them is the larger one, that will determine the height of the whole row.

By positioning the text element inside its column absolute, we can achieve that - the text gets taken out of the layout flow, does not influence how high the whole row gets any more, that is solely down to the image now.

And if we position the text element at all four "corners" of the column element it is in, it will automatically take that width & height. (inset sets the values for top, bottom, left and right all in one go.)

The column itself gets position: relative to be the anchor point, and for the text element I used inset: 0 12px, to replicate the 12px padding-left and -right the column would normally apply to its content.

You will have to check the rendered snippet here in full-screen mode, so that the two-column layout actually applies; and you will also have to wrap this into appropriate media queries, so that my changes don't apply below the chosen two-column breakpoint, because there the absolute positioning of the text will mess things up, so it must not be applied there to begin with.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.scrollTextColumn {
position: relative;
}
#textContentAre {
position: absolute;
inset: 0 12px;
}

<!-- language: lang-html -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h1 class="display-3 text-center">Willkommen auf</h1>
<h1 class="display-6 text-center">Diese Seite befindet sich im Aufbau</h1>
<div class="row">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12 my-3">
<div id="targetcard" class="card">
<img id="pic_uc" class="nav-item rounded" src="https://placehold.co/600x400" alt="">
<div class="card-img-overlay">
<a target="_blank" href="http://www.freepik.com"></a>
</div>
<div class="card-body">
<p class="card-text fs-6 fw-light lh-1">Designed by BiZkettE1 / Freepik</p>
</div>
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12 my-3 scrollTextColumn">
<div id="textContentAre" class="card border-0 overflow-y-scroll">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur officiis iusto dolorum aspernatur itaque sunt placeat veniam velit eius! Itaque molestias laborum repellat dicta doloribus? Unde atque perferendis eaque architecto. Tempora sapiente
accusantium iste libero qui fugiat consectetur laudantium placeat ab explicabo inventore sunt modi facere a dolor, vitae at ratione! Explicabo nulla quasi provident facilis repellendus esse deleniti tenetur eaque ratione perferendis sunt rerum
amet accusantium hic temporibus quidem, laborum nemo blanditiis doloremque! Fugit eligendi atque illo. Molestiae modi ex magnam id quaerat perferendis laboriosam illo repellat, in reiciendis! Rem voluptate quae fugit doloremque molestias unde
ab necessitatibus perspiciatis, ipsa autem, voluptas commodi esse ex. Incidunt libero dolores consequuntur distinctio sequi impedit voluptatibus, eum inventore, deserunt facere quidem error, minima sunt labore enim? Recusandae labore dignissimos
libero ab asperiores maiores tenetur magnam, rerum itaque voluptate ipsa dolorum voluptatem officia in alias omnis! Animi incidunt, ipsa molestias a ut ducimus consequuntur libero dicta expedita voluptatem fuga nam veniam facere ad pariatur voluptate
autem sunt reiciendis reprehenderit maiores. Nostrum, architecto. Veniam id facere suscipit aliquid vitae consequuntur eum aspernatur quam magnam libero illo voluptate corporis iste pariatur consequatur, totam eligendi eveniet adipisci obcaecati
qui architecto incidunt molestias mollitia fugiat. Laborum quod, sunt perspiciatis minima totam architecto quibusdam! Eligendi dignissimos eos ut? Maxime distinctio repellat non magnam cupiditate beatae corrupti laboriosam deserunt quisquam ullam
quam assumenda itaque dolores debitis facere exercitationem, officiis explicabo doloribus nobis. Error quibusdam ut suscipit in a. Nisi ad doloremque ipsum sit tempore perferendis reiciendis accusamus tenetur facilis cupiditate molestias est autem
ea vero nostrum ipsa magnam, iste ipsam deserunt rem fugit. Quidem magnam recusandae doloribus dignissimos ad modi inventore sint labore saepe! Tenetur, neque hic ducimus quaerat odit maiores officiis nostrum aliquid, architecto ut perspiciatis
qui adipisci quas. Ab, laudantium ratione. Cupiditate consequatur iure.
</div>
</div>
</div>
<div class="row">
<div class="col my-3 text-center">
<p class="text-muted">
Kontakt <a href="#" class="text-reset">Kontakt</a>.
</p>
</div>
</div>
</div>

<!-- end snippet -->