JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<div class="outer">
  Content 1  Content 1  Content 1  <br>
  Content 1  Content 1  Content 1  <br>
  Content 1  Content 1  Content 1  
</div>

CSS

.outer {
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  position: relative;
  padding: 10px 20px;
}
.outer:before, .outer:after {
  content: "";
  height: calc(100% + 24px);
  position: absolute;
  top: -12px;
  left: 10px;
  width: 2px;
  background: black;
}
.outer:after {
  right: 10px;
  left: auto;
}