Div aspect ratio and height:100% [duplicate] - html

Question

This question already has answers here:
Setting Element Width Based on Height Via CSS
(10 answers)
Set width according to height [duplicate]
(2 answers)
Closed 2 years ago.
I'm struggling to apply an aspect ratio to a div that should grow to 100% height of it's parent.
The map div should grow to the height of the card (with is defined by the amount of text) and also maintain a squared 1:1 ratio.
I saw working solutions if the div is using 100% width (like here: https://tailwindcss.com/course/locking-images-to-a-fixed-aspect-ratio)
But it's not working when I want to have height:100% and therefore using padding-left/right:100%
This is currently my not working attempt:
<div class="row">
<div
style="position: relative; height: 100%; padding-left:100%"
>
<div
style="position: absolute; height: 100%; width: 100%;">
#map
></div>
</div>
<div class="col pt-2">
<h5>Title</h5>
<p>Subtitle</p>
<p>Subtitle</p>
<p>Subtitle</p>
<p>Subtitle</p>
</div>
</div>

Answer 1

If I understood well, you want to dynamically change the map box width and height based on the text size. Is so, follow this code:
<div class="wrapper">
<div class="map">
<p>Map</p>
</div>
<div class="content">
<h1>Title</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
</div>
CSS:
.wrapper {
display: flex;
border: 1px solid gray;
}
.map {
background: gray;
}
.content {
background: white;
flex: 1;
}
jQuery script:
$( window ).on("load resize", function() {
var width = $('.map').height();
$('.map').width(width);
});