JSFiddle - React, Tailwind, and code Playground

HTML

<div class = "my_div">

</div>
<div class = "my_text">
  Hello World<br>
  Hello World<br>
  Hello World
</div>

CSS

.my_div{
  width: 100px;
  height: 100px;
  border: 4px solid #000;
  border-right: none;
  position: relative;
  display: inline-block;
}
.my_div:after, .my_div:before{
  width: 4px;
  height: 20px;
  background-color: #000;
  content: '';
  display: block;
  position: absolute;
  right: 0px;
}
.my_div:after{
  top: 0px;
}
.my_div:before{
  bottom: 0px;
}


.my_text{
  display: inline-block;
  vertical-align: top;
  margin-top: 25px;
  margin-left: -20px;
}