I'm fairly new to developing in Angular and I'd like some help with finding the best way to create a variable CSS height in Angular CLI V12. To simplify my question by a lot I'll present my problem as follows. I've got three boxes as seen below.

Picture of boxes:

These three boxes were made by three components. The code of which is below.

app.component.html:

<app-top></app-top>
<app-center></app-center>
<app-bottom></app-bottom>

top component:

.box {
    width: 500px;
    height: 100px;
    padding: 10px;
    border: 5px solid black;
    margin: 0;
}

<div class="box">top box</div>

center component:

.box {
    width: 500px;
    height: 100px;
    padding: 10px;
    border: 5px solid green;
    margin: 0;
}

<div class="box">center box</div>

bottom component:

.box {
    width: 500px;
    height: 100px;
    padding: 10px;
    border: 5px solid yellow;
    margin: 0;
}

<div class="box">bottom box</div>

What I want to do here is change the height of the center box dynamically through a variable in the typescript portion of my Angular project. I don't think what I'm trying to do here is all that complicated but all the sources I find online for this are somewhat outdated and a bit confusing to follow if you are new to the development scene. What would be the best way to go about doing this? Thank you.