Transition max-height of div in relation to its max-width

Question

I'm pretty new to HTML, CSS and JS and right know I do a project for school. So I have a timeline with years on it and everytime you click on the year a box expands with information in it. My problem now is that it always expand to its max-width but I want that the div is in a specific ratio. (tried aspect-ratio but didnt work)

Here is the following code

JS:

$('.box2').each(function() {
    var $this = $(this);
    
    function toggleActive() {
        $('.bigbox2').toggleClass('bigbox2').children('.content');  
    }

    $this.click(function() {
        if (!$(this).hasClass('bigbox2') ) { 
            toggleActive();       
        }
        $this.toggleClass('bigbox2').children('.content');
    }) 
}) 

body {
    margin: 0;
    background: #222;
    font-family: Impact;
}

.row2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: left;
    gap: 50px;
    position:absolute; top:10px;left:5px;
}

.box2 {
    position: relative; left: 50px;
    overflow: hidden;
    border-radius: 30px;
    background: white;
    padding: 10px;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    max-height: 25px;
    max-width: 55px;
    transition-duration: 200ms;
    transition-delay: 1ms;
    transition: max-width 0.5s ease 0s, max-height 0.5s ease 0s;
    transition-timing-function: ease;
}

.box2.bigbox2 {
    max-width: 700px;
    max-height: 1000px;

}

.box2 h2 {
    margin-top: 0px;
    text-align: right;
}

<div class="right"></div>
    <div class="line"></div>
<div class="row2">
        <div class="box2">
            <h2 class="title">2010</h2>
            <div class="content">
                <div>
                    <p>sjdfhasjdfsjkfhs dsdfh asjkdfhasjkdf hsajkdfhasdkjfhaskjfd hasjfd hasjfkhaslkdfjashkdjfhasfkjh sdjkf 
                        hasjkfhsajkfhsakfhasjkdfhasjkdfasjkfahsfjk asj hsaj hasdj fhasjkdf hasjk hfsakjfhasklfhaslfkjashdfjksadhfjsahfjsjkfafhsdfjkalsfh 
                        as sajfsjk</p>
                </div>
            </div>
            
        </div>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

So here is an example and I want like that it uses more height than width, but its using always so whole width.

Thanks already!!