Html 在两个垂直放置的div-CSS之间画一条垂直线？

我正在努力实现这样的目标

带字母的圆圈从第一个div和第二个div的开头开始，中间有一个行分隔符。这里的直线长度应根据两个div中间的空间计算。我试了两种方法，但都不走运。请给我一个方法来做这件事

更新：

我尝试了@Vadim answer，但在我的例子中，分隔符长度应该是动态的，而不是静态的，div如下所示：

<div class="container">
  <div class="first-div">
    <div class="letter">Q</div>
    <div>another div</div>
  </div>

  <div class="second-div">
     <div class="letter">A</div>
     <div>another div</div>
  </div>
</div>

Q
另一个部门
A.
另一个部门

---

我想在字母之间画一条垂直线。线条高度应根据内部div高度动态变化。

您可以使用flexbox实现所需布局：

.container{
背景色：#ccc；
填充：15px；
/*将一列中的项目对齐，并占用内容定义的空间*/
/*这用于对中分离器*/
显示：内联flex；
弯曲方向：立柱；
}
.信{
宽度：25px；
高度：25px；
背景色：#fff；
边界半径：50%；
/*文本居中的样式*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.分离器{
宽度：5px；
高度：50px；
边界半径：3px；
背景色：#fff；
边缘顶部：5px；
边缘底部：5px；
/*水平居中*/
自对准：居中；
}

Q
A.

请分享您的HTML和CSS，以及您迄今为止所尝试的内容。您可以制作一个div并将其放在两者之间，或者使用charecter映射charecterswindows@Duannx谢谢你的回复。我的应用程序是在react上开发的，我能够使用预定义的react库将中间有字母的圆圈放置起来。我只是想知道，如何在两个垂直放置的div之间画一条垂直线？@Nani这些“字母”之间应该如何出现空白？据我所知，我们有

.first div

和

.second div

，我们应该在它们之间添加一行。