body {
    background-color: #777;
}

.replace-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1rem;
    align-items: center;
    width: 100%;
}

.replace-grid > div {
    align-self: start; /* Aligns to top */
    justify-self: start; /* Aligns to left */
    /* OR use the shorthand: */
    place-self: start start;
}

.h4 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2;
}

.highlight-before {
    background-color: #FAA; /* highlight color */
}

.highlight-after {
    background-color: #AFA; /* highlight color */
}


.preserved-text {
    white-space: pre-wrap;
    line-height: 1.1; /* adjust as needed */
    background-color: #eee;
    padding:1em;
}


.empty-row {
    grid-column: 1 / -1;   /* span full width */
    min-height: 4px;      /* acts as row spacer */
}

.red-text {
    color: #F00;
}

.green-text {
    color: #00F;
}