水平线与垂直线（-|）相交HTML / CSS

Question

我正在尝试创建一个看起来像这样的div-|本质上，它是一条水平线，与中间的一条垂直线相交。谢谢！

更好的图像：https://ibb.co/3Y8TCms

我已经在线尝试了一些解决方案；但都包括在CSS中使用旋转，但我希望有其他解决方案

Answer 1

这是我的解决方案。希望对您有帮助。

.wrapper {
  display: flex;
  flex: row nowrap;
  align-items: center;
}

.middle {
  height: .2px;
  width: 50%;
  border: .2px solid #000;
}

.vertical {
  height: 400px;
  widows: 1px;
  border: .4px solid #000;
}

<div class="wrapper">
  <div class="middle"></div>
  <div class="vertical"></div>
</div>