您可以尝试通过flex对齐文本项：

.container {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem;
    align-items: baseline;
}

.text1 {
    color: #fff;
    background-color: #000;
    height: 100%;
    display: flex;
    align-items: last baseline;
}

.text2 {
    font-size: 3.75rem;
    align-self: center;
}

<div class="container">
    <div class="text1">text1</div>
    <div class="text2">text2</div>
</div>

如果不想使用表，this answer可能会为您指出正确的方向。
如果您不介意使用display: table，可以使用vertical-align属性，如下所示。

.container {
  display: table;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem;
}

.text1 {
  display: table-cell;
  color: #fff;
  background-color: #000;
  vertical-align: bottom;
}

.text2 {
  font-size: 3.75rem;
}

<div class="container">
  <div class="text1">text1</div>
  <div class="text2">text2</div>
</div>

我使用align-items:self-end、display:flex和line-height属性将文本对齐到同一级别。

.container {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax( max-content, 0px));
 grid-gap: 1rem;
}
.text1 {
 color: #fff;
 background-color: #000;
 align-items:self-end;
 display:flex;
 height:100px;
 padding:25px 25px 0px 25px;
 line-height:0.9;

}
.text2 {
 color: #000;
 display: flex;
 align-items:self-end;
 font-size: 3.25rem;
 line-height: 0.7;
}

<div class="container">
 <div class="text1">text1</div>
 <div class="text2">text2</div> 
</div>