title: How to show autocomplete options under the box that the options are typed?
body: <p>How to show autocomplete options under the box that the options are typed? With the code below, the options are shown on the right side.</p>
  <p>label has <code>display: flex</code> so that the text &quot;Category&quot; displays on the left side of the input. This is what messes it up.</p>
  <pre><code> &lt;label&gt;
     Category
    &lt;input type=&quot;text&quot; value=&quot;a&quot;&gt;
     &lt;span class=&quot;autocomplete&quot;&gt;
        &lt;ul class=&quot;autocomplete-items&quot;&gt;
           &lt;li class=&quot;&quot;&gt;Alligator&lt;/li&gt;
           &lt;li&gt;Bask&lt;/li&gt;
           &lt;li&gt;Crocodilian&lt;/li&gt;
           &lt;li&gt;Death Roll&lt;/li&gt;
           &lt;li&gt;Jaws&lt;/li&gt;
           &lt;li&gt;Solitary&lt;/li&gt;
           &lt;li&gt;Tail&lt;/li&gt;
           &lt;li&gt;Wetlands&lt;/li&gt;
        &lt;/ul&gt;
     &lt;/span&gt;
  &lt;/label&gt;
  </code></pre>
  <p>and css</p>
  <pre><code>  .autocomplete {
      position: relative;
      display: inline-block;
    }
    
    .autocomplete-items {
      position: absolute;
      border: 1px solid #d4d4d4;
      border-bottom: none;
      border-top: none;
      z-index: 99;
      top: 100%;
      left: 0;
      right: 0;
    }
        label {
          display: flex;
          margin-bottom: 1rem;
          align-items: center;
          width: 100%;
        }
  </code></pre>