Невозможно центрировать текст рядом с полем ввода

Question

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

HTML

<p id="textnexttosearchbar">Search</p>
<input type="text" id="searchbar">

CSS

/*Seach bar at top*/
#searchbar{
    margin-left: 200px;
}

/*Text next to search bar at top*/
#textnexttosearchbar{
    margin-left:20px;
}

Answer 1

Свойства отображения ваших элементов по умолчанию block. Измените на inline-block и все будет готово.

/*Seach bar at top*/
#searchbar{
    margin-left: 200px;
}

/*Text next to search bar at top*/
#textnexttosearchbar{
    margin-left:20px;
    display:inline-block;
}

<p id="textnexttosearchbar">Search</p>
<input type="text" id="searchbar">