我在一个正在构建的网页中有一个表格，其中左 * 或 * 右列（但不是两列都有）有一些相当长的文本（几个单词）。该表格有两列-第一列左对齐，第二列右对齐。以下是我的表格的简化版本：

<table>
  <tr>
    <td>Some rather long text</td>
    <td class=right-align>Short text</td>
  </tr>
  <tr>
    <td>Text</td>
    <td class=right-align>Some very long piece of text</td>
  </tr>
</table>

它还附带了一点CSS：

.right-align {
  text-align: right;
}

table {
  width: 100%;
}

在合理的宽度下，它看起来很好：

不幸的是，如果缩小窗口，文本将换行：

有没有一种方法可以让文本通过“列分隔符”，并允许每一行的边框位于不同的位置？如果每一行的“列分隔符”可以不同，那么每一行只占用一行的空间。我没有使用任何库，只是CSS + HTML。
我正在寻找它做这样的东西（在MS画图）