JSFiddle - React, Tailwind, and code Playground

HTML

<div class="obalujici-obal">
<div class="obal">
  <span class="kolecko"></span>
  bla bla bla <br> bla bla bla <br> bla bla bla
</div>
</div>

CSS

.obalujici-obal {
  overflow: hidden;
  padding-top: 20px;
  display: inline-block;
}
.obal {
  padding: 20px;
  border: 1px solid red;
  position: relative;
  border-top: none;
}
.kolecko {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid green;
  border-radius: 50%;
  top: -11px;
  left: 50%;
  margin-left: -11px;
}
.kolecko:before {
  content: '';
  height: 1px;
  background: red;
  position: absolute;
  right: 100%;
  top: 10px;
  width: 5000px;
  margin-right: 5px;
}
.kolecko:after {
  content: '';
  height: 1px;
  background: red;
  position: absolute;
  left: 100%;
  top: 10px;
  width: 5000px;
  margin-left: 5px;
}