Blockquote not aligning

Question

I'm designing a responsive site which means the layout changes. When viewed as wide as possible, my blockquote wraps to the next line. I would like for it to be on the same line.

I have managed to fix the open quote by adding some text-indent however I'm unable to move the close quote.

My HTML:

<blockquote><p class="blockQuote">In recent years we have noticed a growth in demand for audit services, by enterprises with foreign investment, partly because of the demands on the part of organizations such as the CPI and the central bank.</p></blockquote>

CSS:

blockquote  {
    font-family: serif;
    font-style: italic;
    color: #000;
    margin: 0px 0px 10px 0px;
}

blockquote:before   {
    content: "\201C";

}

blockquote:after    {
    content: "\201D";

blockquote:before   {
        position: absolute;
        width: 60px;
        height: 60px;
        line-height: 1;
        font-size: 120px;
    }

    blockquote:after    {
        position: absolute;
        width: 60px;
        height: 60px;
        line-height: 1;
        font-size: 120px;
    }

When I use a span element, the close quote fixes but the open quote looks like it should move further up.

Answer 1

Add <span> tag instead of <p> tag. Working JSFiddle here https://jsfiddle.net/jfmf4ujc/