How to align <form> elements vertically?
<p>I'm trying to make a copy of Google's search site from 2003 as a HTML exercise but I ran into a problem. I have finally managed to create an unordered list next to an input field but I don't want that text input to move alongside with the last item of the list as you can see below:</p>
<p><img src="https://i.imgur.com/eMbjFLo.png" alt="My problem" /></p>
<p>Could you tell me what I'm supposed to do in order to move that <code>&lt;input&gt;</code> field next to &quot;Advanced search&quot;?</p>
<p>This is my code:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>ul {
  text-align: left;
  font-size: 12px;
  margin: 0px auto;
  display: inline-block;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form action="http://www.google.com/search" method="get"&gt;
&lt;div style="text-align:center"&gt;
&lt;input type="text" name="q" placeholder="Search on Google"  style="width: 380px" &gt;
&lt;ul&gt;
&lt;li&gt;Advanced search&lt;/li&gt;
&lt;li&gt;Preferences&lt;/li&gt;
&lt;li&gt;Language tools&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>
<p><a href="https://code.sololearn.com/WIbV1C63rtrF/#html" rel="nofollow noreferrer">My whole code</a></p>