JSFiddle - React, Tailwind, and code Playground

by Andrei Gheorghiu

HTML

<h2 class="divider">Divider</h2>
<h2 class="divider" text-position="right">Divider</h2>
<h2 class="divider" text-position="left">Divider</h2>

SCSS

$divider-selector    : ".divider";
$divider-border-color: rgba(0,0,0,.21);
$divider-padding     : 1rem;
$divider-border-width: 1px;
$divider-border-style: solid;
$divider-max-width   : 100%;

#{$divider-selector} {
  display: flex;
  align-items: center;
  padding: 0 $divider-padding;
  max-width: $divider-max-width;
  margin-left: auto;
  margin-right: auto;

  &:before,
  &:after {
    content: '';
    flex: 0 1 100%;
    border-bottom: $divider-border-width $divider-border-style $divider-border-color;
    margin: 0 $divider-padding;
    transform: translateY(#{$divider-border-width} / 2)
  }

  &:before {
    margin-left: 0;
  }

  &:after {
    margin-right: 0;
  }

  &[text-position="right"]:after,
  &[text-position="left"]:before {
    content: none;
  }
}