Create a line-on-sides heading

A heading whose left and right sides are horizontal lines can be structured as a grid with three columns:

.heading {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-gap: 1rem;
    text-align: center;
}

`1fr auto 1fr` indicates that the left and right columns will have the same widths and they'll take the remaining spaces.

We can use the `::before` and `::after` pseudo elements to represent the left and right sides of the heading respectively:

.heading::before,
.heading::after {
    align-self: center;
    border-top: 0.25rem double #e5e7eb;
    content: '';
}

Create a line-on-sides heading