实现卡片中每一条数据key的右对齐

前言：

在公司里面导师要求实现了卡片（公司使用的框架是react，卡片引用的ant-design-moble的组件）的功能，每一条数据横向展示，但是数据的key要实现右对齐，经过不断的修改，最后总结结构和样式如下：

HTML结构:

<div class="card-content">
  <p class="row">
    <span class="label">任务编号：</span>
    <span class="value">1321231231</span>
  </p>
  <p class="row">
    <span class="label">执行者：</span>
    <span class="value">ziop</span>
  </p>
  <p class="row">
    <span class="label">任务开始时间：</span>
    <span class="value">2024.09.18</span>
  </p>
</div>

样式：

 .row{
    display: flex;
    align-items: center;
    line-height: 21px;
    font-size: 14px;
  }
 .key {
    width: 100px; // 或者使用 min-width
    text-align: right;
    color: #666;
  }