Цитата не выравнивается

Question

Я разрабатываю адаптивный сайт, что означает изменение макета. При просмотре настолько широко, насколько это возможно, моя цитата переносится на следующую строку. Я хотел бы, чтобы это было на одной линии.

Мне удалось исправить открытую цитату, добавив некоторые text-indent однако я не могу переместить закрывающую цитату.

Мой 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;
    }

Когда я использую span элемент закрывает кавычку, но открытая кавычка выглядит так, как будто она должна двигаться дальше вверх.

Answer 1

Добавлять <span> тег вместо <p> тег. Работающий JSFiddle здесь https://jsfiddle.net/jfmf4ujc/