html - 如何将水平线放在两个兄弟 标签下

Question

我有以下 html 供我查看。

p {
  width: 50%;
  float: left;
}

<div>
  <p>The first paragraph.</p>
  <p>The second paragraph.</p>
  <p>The third paragraph.</p>
  <p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>
</div>

我不允许对 html 进行任何更改。我想要每两个

标签后一行，如下图所示。(p 标签的数量不限于四个。它们可以增加。)

有人可以告诉我怎么做吗？甚至有可能吗？

Answer 1

div {
    display: flex;
    flex-wrap: wrap;
}
div p {
    max-width: 50%;
    flex-grow: 1;
    flex-basis: 0;
    border-bottom: 1px solid black;
}