Получить абзац в той же строке, что и заголовок в CSS

Question

У меня есть следующий код HTML и CSS, который я взял из темы WordPress.

<div class="ws-contact-info">
    <div class="col-sm-4">
        <h2 style="text-align: center;">Phone:</h2>
            <p style="text-align: center;"><a href="#">(098) 765-4321</a></p>
    </div>
</div>

На веб-странице это выглядит следующим образом

Phone:
(098) 765-4321

Как мне написать CSS, чтобы элементы помещались в один ряд , вот так:

Phone: (098) 765-4321

Answer 1

Примените display: inline-block к элементам <h2> и <p>, так как они оба являются элементами block, поэтому они занимают всю ширину, вызывая разрыв строки.

Как вариант, вы может применяться float: left к обоим из них.