<blockquote class="testimonial">
        <p class="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in nulla tristique, iaculis purus tristique, faucibus justo. Etiam posuere odio nibh</p>
        <cite class="cite">- Janice Queglin</cite>
</blockquote>
.testimonial {
    display: grid;
    grid-template-columns: minmax(40px, 10%) 1fr minmax(40px, 10%);
    grid-gap: 3ch;
}
.testimonial::before, .testimonial::after {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/161359/quotes.png);
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    grid-row: 1 / 3;
}
.quote {
    grid-column: 2 / 3;
    
}
.cite {
    grid-column: 2 / 3;
}

.testimonial::after {
    transform: rotate(180deg);
    grid-column: 3;
}




.testimonial {
    max-width: 900px;
    margin: 50px auto;
    p {
        font-size: 24px;
        line-height: 1.5em;
    }
    cite {
        text-align: right;
        display: block;
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.