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 {
    content: "";
    height: calc(100% + 24px);
    position: absolute;
    top: -12px;
    left: 10px;
    width: calc(100% - 20px);
    border-left: 2px solid black;
    border-right: 2px solid black;
}