如何将字段与标题内的文本对齐

<table>
  <tr>
    <th>字段1</th>
    <td>文本1</td>
  </tr>
  <tr>
    <th>字段2</th>
    <td>文本2</td>
  </tr>
</table>

<div class="container">
  <div class="field">字段1</div>
  <div class="text">文本1</div>
</div>
<div class="container">
  <div class="field">字段2</div>
  <div class="text">文本2</div>
</div>

.container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

.field {
  width: 100px; /* 设置字段宽度 */
}

.text {
  flex: 1; /* 填充剩余空间 */
}