How to control height within a Grid?

Question

Currently, I have the code below, I would like to descend to marca and meta to the edge of the red line, how can I move them ?

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    background-color:white;
    background-size: cover;
}
.container {
    width: 380px;
    height: 160px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.container div {
    
    display: flex;
    justify-content: center;
    align-items: center;
}
.rel, .acu {
    grid-column: span 2;
    background-color: red;
}

<div id="row1">

    <div class="container">
        <div class="marca">Marca</div> 
        <div class="meta">Meta</div>
        <div class="rel">Realizado</div>
        <div class="acu">Acumulado</div>
    </div>
    
</div>

Answer 1

1. You can use .container .marca, .meta{align-items:flex-end!important;} in marca and meta with !important
2. Or instead of using .container div to set for all div, you put only the classes you want to be equal and separate the ones you want to be different.

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    background-color:white;
    background-size: cover;
}
.container {
    width: 380px;
    height: 160px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.container .marca, .meta {
    display: flex;
    justify-content: center;
    align-items:flex-end;
}
.container .rel, .acu {  
    display: flex;
    justify-content: center;
    align-items: center;
}
.rel, .acu {
    grid-column: span 2;
    background-color: red;
}

<div id="row1">

    <div class="container">
        <div class="marca">Marca</div> 
        <div class="meta">Meta</div>
        <div class="rel">Realizado</div>
        <div class="acu">Acumulado</div>
    </div>
    
</div>