title: selectize.js multi drop down input location
body: <p>I am attempting to have the search input as the first element in the multi selectize div. I have tried by manipulating the DOM, and also with CSS only.</p>
  <p>I can get the input to be shown first, with the selected options underneath, but this seems to break the functionality of removing tags and I have to click each twice.</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-js lang-js prettyprint-override"><code>$(document).ready(function() {
    let selectize = $("#mySelect").selectize({
      searchField: ["text", "value"],
      plugins: ["remove_button"]
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.selectize-input {
    display: flex !important;
    flex-direction: column;
  }
  
  .selectize-input&gt;div {
    order: 2;
  }
  
  .selectize-input&gt;input {
    order: 1;
  }
  
  .selectize-control.multi .selectize-input&gt;div {
    width: 100%;
    text-align: left;
  }
  
  .selectize-control.single .selectize-input::after {
    right: 5px !important;
  }
  
  .selectize-control.plugin-remove_button .item {
    justify-content: space-between;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.bootstrap4.min.css" integrity="sha512-MMojOrCQrqLg4Iarid2YMYyZ7pzjPeXKRvhW9nZqLo6kPBBTuvNET9DBVWptAo/Q20Fy11EIHM5ig4WlIrJfQw==" crossorigin="anonymous"
  /&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.min.css" integrity="sha512-bkB9w//jjNUnYbUpATZQCJu2khobZXvLP5GZ8jhltg7P/dghIrTaSJ7B/zdlBUT0W/LXGZ7FfCIqNvXjWKqCYA==" crossorigin="anonymous" /&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js" integrity="sha512-pF+DNRwavWMukUv/LyzDyDMn8U2uvqYQdJN0Zvilr6DDo/56xPDZdDoyPDYZRSL4aOKO/FGKXTpzDyQJ8je8Qw==" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;div style="width:200px;"&gt;
    &lt;select id="mySelect" multiple&gt;
      &lt;option value='A'&gt;Value A&lt;/option&gt;
      &lt;option value='B'&gt;Value B&lt;/option&gt;
      &lt;option value='C'&gt;Value C&lt;/option&gt;
      &lt;option value='D'&gt;Value D&lt;/option&gt;
      &lt;option value='E'&gt;Value E&lt;/option&gt;
      &lt;option value='F'&gt;Value F&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Here is a fiddle with my attempt using CSS: <a href="https://jsfiddle.net/josborne71/r8h3ze7m/58/" rel="nofollow noreferrer">https://jsfiddle.net/josborne71/r8h3ze7m/58/</a></p>