Html 将封口线（文本顶部）与不同大小的字体对齐

我在网页上有一组编号的小节，每个小节都有一个与小节序号（编号）一致的相关标题。它本质上是一个有序列表，其中每个项目都包含任意内容

该设计要求（a）每个章节的序号大约是标题文本的两倍高，（b）标题（呈现的大写字母）的大写字母（顶部）与序号的大写字母对齐

标题文本是动态的，根据长度的不同，可以占据1-4行的任意位置

我已经尝试在使用

表格单元格格式化的元素中使用
垂直对齐：top
，它非常接近所需的外观：


.title\u行{
显示：表格；
}
.标题行.序数{
显示：表格单元格；
垂直对齐：顶部；
字号：4em；
}
.title\u行。title{
显示：表格单元格；
垂直对齐：顶部；
字号：2em；
文本转换：大写；
}

3.
本文的首行（顶部）应与序数的顶部对齐。
这可以通过设置
1em的
行高度来解决


.title\u行{
显示：表格；
}
.标题行.序数{
垂直对齐：顶部；
显示：表格单元格；
线高：1米；
字号：4em；
}
.title\u行。title{
显示：表格单元格；
垂直对齐：顶部；
字号：2em；
文本转换：大写；
}

3.
本文的首行（顶部）应与序数的顶部对齐。