Html 无法将文本居中放置在输入框旁边

我不确定我做错了什么，但我无法将文本放在搜索栏旁边。我试着用填充物来填充输入框，但没有移动，结果是使输入框本身变宽或增加高度。我还尝试使用填充和边距移动搜索文本，但仍然无法使文本按我希望的方式移动。我也看了一些贴在Stack上的类似问题，但我仍然无法修复我的页面。我希望搜索文本和输入框挨在一起，就像你在表单上看到的那样。填充和边距不是移动文本和搜索栏的正确方法吗？这是我的代码和我的页面当前外观的图像

HTML

---

默认情况下，图元的显示属性为块。更改为内联块，您将全部设置完毕

/*顶部的搜索栏*/ 搜索栏{ 左边距：200px； } /*顶部搜索栏旁边的文本*/ textnextto搜索栏{ 左边距：20px； 显示：内联块； }

搜索

---

标记和标记都是块级元素，这意味着它们显示在前一个元素下方的新行上。如果你想让它们并排排列，你可以让你的标签显示：inline block；或者，如果你的布局更复杂，你可以在我不能马上接受答案的情况下找到答案，它不会让我，我会在几分钟内。我花了很长时间试图解决这个问题，你的回答终于解决了我的问题，非常感谢@DCR

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

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

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