将文本排列在彼此下方的多行上？

【问题标题】：Line up text over multiple lines under each other?将文本排列在彼此下方的多行上？
【发布时间】：2018-12-11 20:21:28
【问题描述】：

如何模仿这种布局？我可以通过将文本放在单独的 div-s 中来获得换行符，但是左右顶行也在不同的行上。

<div>
        <div style="font-size: 20px; font-weight: 600;">11 <span style="border-left: 1px solid black"></span>     B </div>
        <div>Seats <span style="border-left: 1px solid black"></span> <span style="font-weight: 600;">Party's name</span></div>

    </div>

http://jsfiddle.net/VpW5x/1146/

【问题讨论】：

你必须使用这个html顺序吗？或者我可以换一个新的吗？

标签： html css

【解决方案1】：

这里建议标记你的代码

将它们设置在同一行使用display:flex
创建行使用伪元素:after

.wrap{
 display:flex; 
}
.border-right{
  position:relative;
}
.border-right:after{
    content: '';
    position: absolute;
    width: 1px;
    background: black;
    height: 85%;
    top: 5px;
    left: 100%;
  
}
.first{
    margin: 0;
    font-size: 24px;
    font-weight: bold;
}
.second{
 margin: 0;
}
.p-10{
  padding-right:10px;
  padding-left:10px;
}

<div class="wrap">
  <div class="border-right p-10">
    <p class="first">11</p>
    <p class="second">Seats</p>
  </div>
  <div class="p-10">
    <p class="first">B</p>
    <p class="second">Party's name</p>
  </div>
</div>

【讨论】：