JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  <div class="item">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
  </div>
  <div class="divider"></div>
  <div class="item">
    <p>Potato</p>
  </div>
  <div class="divider"></div>
  <div class="item">
    <p>Markup</p>
  </div>
</section>

CSS

section {
  display: flex;
  flex-direction: row;
  flex: 1;
  margin: 0 -8px;
}

section>* {
  margin: 0 8px;
}

.divider {
  width: 2px;
  margin: 6px 0;
  background: blue;
}

.item {
  flex: 1;
  background: orange;
  align-self: center;
}