“对齐”；“三行”；html中带有缩进的txt

我需要创建文本，每一行实际上由三行组成：第一行是拉丁文本，第二行是数字，第三行是德语文本。附加的代码片段主要是我想要的

然而，文本是分章节结构的。在我的示例中，这些将是第1节和第2节，它们由一个橙色的大数字引入。 现在，我希望橙色的数字能够突出，因为文本同样正确。文本应该是这样的

1  foo  bar  baz
   x    y    z
   Hans Kurt Paul

   xyz  bla  etc
   a    b    c
   Stak Bort Nehm

2  .... ....

这在html和css中是可能的吗（但如果可能的话，没有JavaScript）

.container{
宽度：30em；
}
.盒子{
浮动：左；
填充：0.25em；
身高：5公分；
边框底部：1px黑色实心；
}
.l1、.l2、.l3{
显示：块；
}
.l2{
颜色：#bbf；
字号：0.9em
}
.项目{
字号：2em；
颜色：#f70；
}
.休息{
明确：两者皆有；
}

1.
洛伦蒂
ipsum2ist
智商
ne4Beispiel
内克尔
多洛林
埃拉特，文本，
爱神
solet9auf
德国
duo11geschrieben
征服者。
流动资产
利奥·吉比特
Pretium15noch
帕特里奥奎尔
社会17号威特尔酒店
2.
弗林吉拉米特
布鲁森德
mel45Geschwindigkeit
Adipsing46战争
Rebm.47der
锡泰
nulla49des
整数50neuen
AD51靴子
体积，52英寸
口述
脚本M54Ferne，
viderer55weshalb
lobortis56sich
埃斯特德
乌蒂纳姆，58岁
enim59einen
社区60机器人
corrumpit61Mantel

您需要更改html结构： 我在html中做了一些更改

首先添加div以包装第一个框的内容和相对于该框的位置

将绝对位置添加到编号为1,2

.container{
宽度：30em；
}
.盒子{
浮动：左；
填充：0.25em；
身高：5公分；
边框底部：1px黑色实心；
}
.l1、.l2、.l3{
显示：块；
}
.l2{
颜色：#bbf；
字号：0.9em
}
.项目{
字号：2em；
颜色：#f70；
}
.休息{
明确：两者皆有；
}
.主接线盒{
位置：相对位置；
左侧填充：30px；
边缘底部：20px；
显示：表格；
}
.主框.项目{
位置：绝对位置；
左：0；
}

1.
洛伦蒂
ipsum2ist
智商
ne4Beispiel
内克尔
多洛林
埃拉特，文本，
爱神
solet9auf
德国
duo11geschrieben
征服者。
流动资产
利奥·吉比特
Pretium15noch
帕特里奥奎尔
社会17号威特尔酒店
2.
弗林吉拉米特
布鲁森德
mel45Geschwindigkeit
Adipsing46战争
Rebm.47der
锡泰
nulla49des
整数50neuen
AD51靴子
体积，52英寸
口述
脚本M54Ferne，
viderer55weshalb
lobortis56sich
埃斯特德
乌蒂纳姆，58岁
enim59einen
社区60机器人
corrumpit61Mantel

您需要更改以下内容的html结构： 我在html中做了一些更改

首先添加div以包装第一个框的内容和相对于该框的位置

将绝对位置添加到编号为1,2

.container{
宽度：30em；
}
.盒子{
浮动：左；
填充：0.25em；
身高：5公分；
边框底部：1px黑色实心；
}
.l1、.l2、.l3{
显示：块；
}
.l2{
颜色：#bbf；
字号：0.9em
}
.项目{
字号：2em；
颜色：#f70；
}
.休息{
明确：两者皆有；
}
.主接线盒{
位置：相对位置；
左侧填充：30px；
边缘底部：20px；
显示：表格；
}
.主框.项目{
位置：绝对位置；
左：0；
}

1.
洛伦蒂
ipsum2ist
智商
ne4Beispiel
内克尔
多洛林
埃拉特，文本，
爱神
solet9auf
德国
duo11geschrieben
征服者。
流动资产
利奥·吉比特
Pretium15noch
帕特里奥奎尔
社会17号威特尔酒店
2.
弗林吉拉米特
布鲁森德
mel45Geschwindigkeit
Adipsing46战争
Rebm.47der
锡泰
nulla49des
整数50neuen
AD51靴子
体积，52英寸
口述
脚本M54Ferne，
viderer55weshalb
lobortis56sich
埃斯特德
乌蒂纳姆，58岁
enim59einen
社区60机器人
corrumpit61Mantel

这是在不调整HTML的情况下，这个CSS是相当静态的，如果橙色数字大于40px，它将溢出。。。如果您可以调整HTML，将以橙色数字开头的每个部分分别放在一个单独的div中，就会更干净

.container{
宽度：30em；
显示器：flex；
柔性包装：包装；
位置：相对位置；
左侧填充：40px；
}
.盒子{
浮动：左；
填充：0.25em；
身高：5公分；
边框底部：1px黑色实心；
}
.容器.盒子：第一个孩子，
.container.break+框{
左边距：-40px；
宽度：40px；
保证金权利：-0.25em；
}
.l1、.l2、.l3{
显示：块；
}
.l2{
颜色：#bbf；
字号：0.9em
}
.项目{
字号：2em；
颜色：#f70；
}
.休息{
明确：两者皆有；
弹性：10计算（100%+40px+0.25em）；
}

1.
洛伦蒂
ipsum2ist
智商
ne4Beispiel
内克尔
多洛林
埃拉特，文本，
爱神
solet9auf
德国
duo11geschrieben
征服者。
流动资产
利奥·吉比特
Pretium15noch
帕特里奥奎尔
社会17号威特尔酒店
2.
弗林吉拉米特
布鲁森德
mel45Geschwindigkeit
Adipsing46战争
Rebm.47der
锡泰
nulla49des
整数50neuen
AD51靴子
体积，52英寸
口述
脚本M54Ferne，
viderer55weshalb
lobortis56sich
埃斯特德
乌蒂纳姆，58岁
enim59einen
社区60机器人
corrumpit61Mantel