HTML：将两行换行，并在新行中为每行保留空间

我正在尝试使用flexbox或其他技术来创建一种文字处理器

字处理器中的行将由两行组成，并将换行到新行上，同时为新行上的两行保留空间

    <span class="remark" style="display: inline">
      <span style="display: flex; flex-direction: column; flex-wrap: wrap">
        <div class="topic" style="font-size: 12px; border-width: 1px; border-style: solid; border-color: green">This is the secondary row.</div>
        <div class="text" style="font-size: 18px; border-width: 1px; border-style: solid; border-color: red;">This is the primary row. Ideally, once either row reaches the end of the container, the stack will wrap to the next line, reserving space for both rows, creating effectively two sets of rows of alternating Christmas colors instead of one line of green and three lines of red, ho ho ho!</div>
      </span>
    </span>

这是第二行。
这是主行。理想情况下，当任一行到达容器的末端时，堆栈将环绕到下一行，为两行保留空间，有效地创建两组交替的圣诞节颜色行，而不是一行绿色和三行红色，呵呵！

我们的目标基本上是在任何一条车道上都填充有文本的“汽车”时，将填充有文本的双车道“道路”换行

下面是我的意思的大致情况。我试图使两行的行在任何一行中添加文本时展开。行将换行并在新行上保持相同的顺序

    <span class="remark" style="display: inline">
      <span style="display: flex; flex-direction: column; flex-wrap: wrap">
        <div class="topic" style="font-size: 12px; border-width: 1px; border-style: solid; border-color: green">This is the secondary row.</div>
        <div class="text" style="font-size: 18px; border-width: 1px; border-style: solid; border-color: red;">This is the primary row. Ideally, once either row reaches the end of the container, the stack will wrap to the next line, reserving space for both rows, creating effectively two sets of rows of alternating Christmas colors instead of one line of green and three lines of red, ho ho ho!</div>
      </span>
    </span>

========================================================================= aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

进一步编辑：我正试图实现这个问题的目的，除了html/css/js，而不是TeX：

---

谢谢大家!

我可以想出一个小技巧来实现这一点，而不需要使用任何特殊的东西，例如

flexbox

：

绝对定位

文本

和

主题

div

调整

行高

并用

边距

偏移其中一行，以创建效果

。备注{
位置：相对位置；
}
.文本{
字体大小：12px；
颜色：红色；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
线高：3em；
边际上限：1.5em
}
.主题{
字体大小：12px；
颜色：绿色；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
线高：3em；
}

这是主行。理想情况下，一旦这一行到达容器的末尾，它将换行到下一行，为第二行保留空间，有效地创建两组交替的圣诞色行，呵呵！
这是主行。理想情况下，一旦这一行到达容器的末尾，它将换行到下一行，为第二行保留空间，有效地创建两组交替的圣诞色行，呵呵！

请发布您已经尝试过的代码，并解释其不起作用的原因。请查看小提琴的链接。问题是主行直接换行到新行，而不是为次行留出空间并将堆栈作为一个整体换行。非常感谢。我不明白。。。您正在使用

列

弹性方向，并在其顶部使用

包裹

。。。现在没有进行换行…对，我的想法是将两行放在一列中，这样它们将相邻，然后如果其中一行接近容器的边缘，则将它们换行到一起。想象一下HTML文档中的一条双车道道路，当其中一条车道上满是汽车时，它将两条车道换行到一条新行上。@gogamecocks因此，如果其中一行中的文本换行为3行，则希望另一行的高度为3行。。等等我想得对吗？