I'm struggling to align the text next to the search bar on my webpage. I attempted to adjust the padding of the input box, but it ended up expanding instead of moving. Similarly, tweaking the padding and margin of the search text didn't yield the desired results either. Despite researching similar queries on Stack Overflow, I haven't been able to resolve the issue. My goal is to have the "Search" text positioned alongside the input box, resembling a typical form layout. Are padding and margin not suitable for adjusting the position of text and search bars? Below is my code snippet along with an image showcasing the current state of my page.
https://i.sstatic.net/EXdS9.png
HTML
<p id="textnexttosearchbar">Search</p>
<input type="text" id="searchbar">
CSS
/* Search bar at top */
#searchbar{
margin-left: 200px;
}
/* Text next to search bar at top */
#textnexttosearchbar{
margin-left:20px;
}