Splendid layouts

Here’s the CSS for Divider.

.divider-horizontal {
  flex-grow: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 !important;
  border-radius: 0 !important;


  &:where(:not(:empty)) {
    gap: var(--gap, 1rlh);
  }


  &::before,
  &::after {
    content: '';
    flex-grow: 1;
    height: var(--border-width, 1px);
    background-color: var(--border-color, currentColor);
  }
}


.divider-vertical {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 !important;
  border-radius: 0 !important;


  &:where(:not(:empty)) {
    gap: var(--gap, 1rlh);
  }


  &::before,
  &::after {
    content: '';
    flex-grow: 1;
    width: var(--border-width, 1px);
    background-color: var(--border-color, currentColor);
  }
}