Re-adjusting image (and container) to accordeon variable height (in elementor)

I am trying to “copy” the effect of the accortdeon in the following link (https://the-healer-template.squarespace.com/work-with-me). The think that I want is to enlarge the image and the container of the image to fit the height of the accordeon container due to his variable height dependint on the lengh of the text from each accordeon elements.

Since I am working with elementor, the aproach that I am woking with is a two column container one with the image and the other with the container. Also I set the elementor accordion to only one accordeon element unfolded at a time, so when te user click to one of them, automaticaly closes the one that was active or if the click is on the same element, it desactivates it.

The main issue I am having now is that I am new to javascript and programing logic and I don’t know how to make it work. Here is the code that I am using so far, It does what I need but it is not taking in consideration the click on the other element while an other one is active. I activated the “Nested elements” on elementor to be able to assign an ID to each section of the accordeon

The link to my section example: https://www.balanceyoga.beinframe.com/example

<script>

document.addEventListener("DOMContentLoaded", function() {
    
    .responsive-image01 {
    max-width: 100% !important;
    height: auto !important;

    float:right !important;
   /* object-fit: cover;*/
    

    transition: width 300ms linear; 


    }
         
    var yogaCont01 = document.querySelector('.yoga-cont01'); // contenedor 01
    
    var yogaCont02 = document.querySelector('.yoga-cont02'); // contenedor 02
    
    var responsiveImage01 = document.querySelector('.responsive-image01'); 
    
        
    var originalWidth = responsiveImage01.offsetWidth; 

    var responsiveImageWidth01 = responsiveImage01.offsetWidth; 

    var originalHeight = yogaCont02.offsetHeight; 

    var yogaCont02Height = yogaCont02.offsetHeight; 

            
    responsiveImage01.style.width= (responsiveImageWidth01*0.65)+'px'; 

        
            
    function contHeight() {
        if (originalHeight==yogaCont02Height) {
                    
            yogaCont02Height = yogaCont02.offsetHeight;
        
            yogaCont01.style.height = yogaCont02Height + 'px';
            
            responsiveImage01.style.height = yogaCont02Height + 'px';
            
            var calculatedWidth = (originalWidth * yogaCont02Height)/originalHeight;
                
            responsiveImage01.style.width = calculatedWidth + 'px';
                    
        }else {
            

            responsiveImage01.style.height = originalHeight + 'px';
                
            responsiveImage01.style.width = (originalWidth*0.65) + 'px';
            
            yogaCont01.style.height = originalHeight + 'px';
            
            yogaCont02.style.height = originalHeight + 'px';
                
            yogaCont02Height = originalHeight;
            

        }
    }
        
    document.querySelector("#yoga-included").addEventListener("click", function() {
        setTimeout(contHeight, 360);
    
        });
        
    document.querySelector("#yoga-timeline").addEventListener("click", function() {
        setTimeout(contHeight, 360);
    
        });
        
   document.querySelector("#yoga-payment").addEventListener("click", function() {
        setTimeout(contHeight, 360);
    
        });
        
                
    }
        
);

</script>