JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display: flex;">
    <a class="side" target="_blank" href="#">
      <h3>test test test test test test test test test test test test test </h3>
    </a>
    <div class="verticalLine">
    </div>
    <div class="side"></div>
</div>

<div style="display:flex">
    <div class="side"></div>
    <div class="verticalLine">
    </div>
    <a class="side" target="_blank" href="#">
      <h3>test test test test test test test test test test test test test </h3>
    </a>
</div>

CSS

.side {
  width: 45%;
}

.verticalLine:before {
  content: "";
  display: block;
  position: absolute;
  border-left: 0.13em solid #90A4AE;
  border-right: 0.13em solid #90A4AE;
  height: 100%;
  width: 16%;
  margin-left: 42%;
  box-sizing: border-box;
}

.verticalLine {
  position: relative;
  width: 10%;
}



/* Media Queries */

@media only screen and (max-width: 768px) {
  div.side {
    display: none;
  }
  div.verticalLine {
    float: right;
  }

  a {
    float: left;
  }
  .side {
    width: 90%;
  }
}