title: Foundation CSS & jQuery Select2
body: <p>I'm trying to integrate jQuery Select2 with Zurb Foundation CSS and I'm having a bit of trouble.</p>
  
  <p>I need the ability to specify an element to use for storing the selected choices for a multi-select. This element needs to be separate than the element that contains the input search box.</p>
  
  <p>The image below shows two Foundation CSS rows, each row has two columns (except the header row "Country"). A label on the left most column and an input on the right most column. Right now the image below is NOT integrated with Select2.</p>
  
  <p><img src="https://i.stack.imgur.com/65tOF.png" alt="enter image description here"></p>
  
  <p>I'm trying to implement Select2 in a way where it will display just like the below screenshot. (Note: I obviously manually edited the HTML to display in this format).</p>
  
  <p><img src="https://i.stack.imgur.com/jZekx.png" alt="enter image description here"></p>
  
  <p>The final HTML structure that I'm trying to achieve is below.</p>
  
  <pre><code>&lt;div class="select2-container select2-container-multi row"&gt;
  &lt;ul class="select2-choices"&gt;
  &lt;li class="select2-search-choice"&gt;&lt;/li&gt;
  ...
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="small-3 columns"&gt;my label&lt;/div&gt;
  &lt;div class="small-9 columns"&gt;
  &lt;div class="select2-search-field"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>My question is, how can achieve the layout that's in the second image by specifically telling jQuery Select2 where to place the list of selected choices and where to place the search box? </p>