JSFiddle - React, Tailwind, and code Playground

HTML

<div>
Some text end suddenly <span class="vr"></span> a vertical divider appeared!
</div>
<div>
  <div class="box">
Some pretty cool text about something pretty cool text about something pretty cool text about something pretty.
  </div>
  <span class="vr"></span>
  <div class="box">
Some pretty cool text about something pretty cool text about something pretty cool text about something pretty.
  </div>
</div>

CSS

.box{
    display: inline-block; vertical-align: middle;
    width: 200px; height: 100px;
}
.vr{
  display: inline-block; vertical-align: middle;
  height: 100px;
  width: 1px;
  background-color: #000;
}