水平线重叠成两列

工作解决方案:

<div class="row">
    <div class="col-1 col-md-6">
         <h3>heading</h3>
    </div>
  <span class="line"><span></span></span>
    <div class="col-2 col-md-6">
         <p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. </p>
    </div>
</div>

.col-1, .col-2 {
  padding: 40px;
  border: 1px solid #000;
}
.row {
  width: 100%;
  margin: 40px;
  display: flex;
}
p {
  border: 1px solid #000;
  padding: 10px;
}
h3 {
  padding: 0;
  margin: 0;
}

.line {
  position: relative;
}

.line span {
  position: absolute;
  background: red;
  display: inline-block;
  height: 1px;
  /* padding + border */
  top: 41px;
  right: -50px;
  width: 500px;
}
.line span:before {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  border: 1px solid red;
  border-radius: 11px;
  top: -5px;
  left: -10px;
}