Html 浮动文本的垂直对齐

我需要一些浮动文本在充满文本的表格单元格中垂直居中。此代码仅适用于一行，否则会失去对齐

<table style="border: 1px solid red; width: 100%;">
    <tr>
        <td>
            Content.</br>Content.</br>Content.</br>Content.</br>Content.</br>
            <span style="line-height: inherit; float: right; vertical-align: middle;">Float</span>
        </td>
    </tr>
</table>

我可能无法使用任何其他方法来解决它，除了float元素没有其他列，例如，但是我同意任何建议

---

测试代码：

嵌套表正是我所需要的，但我不喜欢在我的代码中有太多的表。我仍然愿意接受任何建议

<table style="border: 1px solid red; width: 100%;">
    <tr>
        <td>
            <table style="border-collapse: collapse; border: 0px; width: 100%;">
                <tr>
                    <td>
                        Content.</br>Content.</br>Content.</br>Content.</br>Content.</br>
                    </td>
                    <td>
                        <span style="line-height: inherit; float: right; vertical-align: middle;">Float</span>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

---

测试代码：

是否使用绝对位置？为什么可能不能？是否允许您更改html并设置另一个单元格？表格是动态的，绝对位置无法完成此操作。我不能设置一个新的列，但我可以编辑代码，因为我喜欢一个解决方案可以是一个嵌套的表，但我不喜欢它。。。我明天才能测试它，所以我甚至不确定它是否能用。