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{
  width: 4px;
  content: '';
  display: block;
  position: absolute;
  right: 0px;
  top: 0px;
  border-top: 20px solid #000;
  border-bottom: 20px solid #000;
  height: 100%;
  box-sizing: border-box;
}


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