title: Modify select2 dropdown position individually
body: <p>I have a little problem with select2 dropdown. I want he dropdown position on the first input is directly placed under the placeholder and the last row of items inputted. I tried this function:</p>
  
  <pre><code>function selectReposition() {
    var placeholderOffset = $("#first-select2 .select2- search__field").position();
    var newPosition = placeholderOffset.top - 104;
    $(".select2-dropdown").css({"top": newPosition + "px"});
  }
  </code></pre>
  
  <p>However it messed up both dropdown from the first and the second input. </p>
  
  <p>My question is how to reposition the first dropdown only? I can’t find the id or whatever to differentiate both the dropdown launched from first or second input.</p>
  
  <p>And also, my other question is, can I make it so the inputted tags placed on the right of the input field? So the input field stay in place on the left side.</p>
  
  <p>Thank you, any help appreciated! :)</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() {
    
    $(".js-example-basic-multiple").select2({
      placeholder: "Select items"
    }).on('change', function(e) {
      if($(this).val() &amp;&amp; $(this).val().length) {
        $(this).next('.select2-container').find('li.select2-search--inline input.select2-search__field').attr('placeholder', 'Select items');
      }
    });
    
    $("#tag-input .js-example-basic-multiple").select2({
      placeholder: "Add tag"
    }).on('change', function(e) {
      if($(this).val() &amp;&amp; $(this).val().length) {
        $(this).next('.select2-container').find('li.select2-search--inline input.select2-search__field').attr('placeholder', 'Add tag');
      }
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.select2-selection {
    height: 36px !important; 
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    border-radius: 0 !important;
    border: solid 1px #D1D1D1 !important;
    padding-left: 4px;
  }
  
  .select2-selection--multiple {
    height: 160px !important;
  }
  
  .select2-selection__choice__remove {
     float: right;
     margin-right: 0;
     margin-left: 2px;
  }
  
  .select2-selection__choice {
    height: 40px;
    line-height: 40px;
    padding-right: 12px !important;
    padding-left: 16px !important;
    background-color: #D0F3FF !important;
    color: #333 !important;
    border: none !important;
    border-radius: 3px !important;
  }
  
  .select2-search--inline .select2-search__field {
    line-height: 40px;
    color: #333;
    width: 88px !important;
  }
  
  .select2-container {
    
  }
  
  .select2-container:hover,
  .select2-container:focus,
  .select2-container:active,
  .select2-selection:hover,
  .select2-selection:focus,
  .select2-selection:active {
    outline-color: transparent;
    outline-style: none;
  }
  
  .select2-results__options li {
    display: block; 
  }
  
  .select2-selection__rendered {
    transform: translateY(2px);
  }
  
  .select2-selection__arrow {
    display: none;
  }
  
  .select2-results__option--highlighted {
    background-color: #D0F3FF !important;
    color: #333 !important;
  }
  
  .select2-selection__choice__remove {
    margin-left: 16px;
    font-size: 16px;
  }
  
  .select2-dropdown {
    border-radius: 0 !important;
    box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15) !important;
    border: none !important;
    margin-top: 4px !important;
  }
  
  .select2-results__option {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    line-height: 24px !important;
    vertical-align: middle !important;
    padding-left: 8px !important;
  }
  
  .selectable-dropdown-each {
    display: block; 
    height: 36px;
    line-height: 36px !important;
    padding-right: 0;
    padding-left: 16px;
    cursor: pointer;
  }
  
  .selectable-hover {
    background-color: #D0F3FF;
  }
  
  .select2-results__option[aria-selected="true"] {
    background-color: #f1f1f1 !important; 
  }
  
  .select2-search__field {
    font-family: 'Open Sans', sans-serif;
    color: #333;
    font-size: 13px;
    padding-left: 8px !important;
    border-color: #D1D1D1 !important;
  }
  
  .select2-selection__placeholder {
    color: #D1D1D1 !important; 
  }
  
  .form-unit .select2-container, .form-unit .select2-selection {
    width: 412px !important;
  }
  
  #tag-input .select2-selection--multiple {
    border: none !important;
    height: auto !important;
    padding: 0 !important;
  }
  
  #tag-input .select2-selection__rendered {
    padding: 0 !important; 
  }
  
  #tag-input .select2-search__field {
    height: 32px;
    border-radius: 16px;
    background-color: #D0F3FF;
    border: none !important;
    padding-left: 16px !important;
    padding-right: 16px;
    width: 104px !important;
  }
  
  #tag-input .select2-search__field::placeholder {
    color: #aaa; 
  }
  
  #tag-input .select2-search__field:focus {
    border: solid 1px #00c983 !important;
    background-color: #fff;
  }
  
  #tag-input .select2-search__field:focus::placeholder {
    color: #d1d1d1;
  }
  
  #tag-input .select2-selection__choice {
    height: 32px;
    line-height: 32px;
    border-radius: 16px !important;
  }
  
  
  
  .form {
    margin-bottom: 40px;
    margin: 0 auto;
    width: 1302px;
    font-family: 'Open Sans', sans-serif;
  }
  
  .form-row {
    display: block;
    width: 100%;
    margin: 0 0 32px 0 !important;
  }
  
  .form-divided {
    display: inline-block;
  }
  
  .form-divided-left {
    margin-right: 32px;
  }
  
  .form-divided-right {
    margin-left: -4px;
    width: 412px;
  }
  
  .form-input-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #333;
  }
  
  .form-unit {
    position: relative;
    vertical-align: top;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" /&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet"&gt;
  
  &lt;div class="form-row"&gt;
      &lt;div id="first-select2" class="form-unit form-divided form-divided-left"&gt;
        &lt;label for="emp-id" class="form-input-label"&gt;Pill Box&lt;/label&gt;
        &lt;select class="js-example-basic-multiple" name="states[]" multiple="multiple"&gt;
          &lt;option value="a1"&gt;Item A1&lt;/option&gt;
          &lt;option value="a2"&gt;Item A2&lt;/option&gt;
          &lt;option value="b1"&gt;Item B1&lt;/option&gt;
          &lt;option value="a1"&gt;Item C1&lt;/option&gt;
          &lt;option value="a2"&gt;Item C2&lt;/option&gt;
          &lt;option value="b1"&gt;Item C3&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;div id="tag-input" class="form-unit form-divided form-divided-right"&gt;
        &lt;label for="emp-id" class="form-input-label"&gt;Tag Input&lt;/label&gt;
        &lt;select class="js-example-basic-multiple" name="states[]" multiple="multiple"&gt;
          &lt;option value="a1"&gt;Item A1&lt;/option&gt;
          &lt;option value="a2"&gt;Item A2&lt;/option&gt;
          &lt;option value="b1"&gt;Item B1&lt;/option&gt;
          &lt;option value="a1"&gt;Item C1&lt;/option&gt;
          &lt;option value="a2"&gt;Item C2&lt;/option&gt;
          &lt;option value="b1"&gt;Item C3&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>$(".js-example-basic-multiple").select2({
   placeholder: "Select items"
  }).on('change', function (e) {
   if ($(this).val() &amp;&amp; $(this).val().length) {
    $(this).next('.select2-container').find('li.select2-search--inline input.select2-search__field').attr('placeholder', 'Select items');
   }
  });
  $("#tag-input .js-example-basic-multiple").select2({
   placeholder: "Add tag"
  }).on('change', function (e) {
   if ($(this).val() &amp;&amp; $(this).val().length) {
    $(this).next('.select2-container').find('li.select2-search--inline input.select2-search__field').attr('placeholder', 'Add tag');
    }
   }
   );
  });
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.select2-selection {
    height: 36px !important; 
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    border-radius: 0 !important;
    border: solid 1px #D1D1D1 !important;
    padding-left: 4px;
  }
  
  .select2-selection--multiple {
    height: 160px !important;
  }
  
  .select2-selection__choice__remove {
     float: right;
     margin-right: 0;
     margin-left: 2px;
  }
  
  .select2-selection__choice {
    height: 40px;
    line-height: 40px;
    padding-right: 12px !important;
    padding-left: 16px !important;
    background-color: #D0F3FF !important;
    color: #333 !important;
    border: none !important;
    border-radius: 3px !important;
  }
  
  .select2-search--inline .select2-search__field {
    line-height: 40px;
    color: #333;
    width: 88px !important;
  }
  
  .select2-container {
  
  }
  
  .select2-container:hover,
  .select2-container:focus,
  .select2-container:active,
  .select2-selection:hover,
  .select2-selection:focus,
  .select2-selection:active {
    outline-color: transparent;
    outline-style: none;
  }
  
  .select2-results__options li {
    display: block; 
  }
  
  .select2-selection__rendered {
    transform: translateY(2px);
  }
  
  .select2-selection__arrow {
    display: none;
  }
  
  .select2-results__option--highlighted {
    background-color: #D0F3FF !important;
    color: #333 !important;
  }
  
  .select2-selection__choice__remove {
    margin-left: 16px;
    font-size: 16px;
  }
  
  .select2-dropdown {
    border-radius: 0 !important;
    box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15) !important;
    border: none !important;
    margin-top: 4px !important;
  }
  
  .select2-results__option {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    line-height: 24px !important;
    vertical-align: middle !important;
    padding-left: 8px !important;
  }
  
  .selectable-dropdown-each {
    display: block; 
    height: 36px;
    line-height: 36px !important;
    padding-right: 0;
    padding-left: 16px;
    cursor: pointer;
  }
  
  .selectable-hover {
    background-color: #D0F3FF;
  }
  
  .select2-results__option[aria-selected="true"] {
    background-color: #f1f1f1 !important; 
  }
  
  .select2-search__field {
    font-family: 'Open Sans', sans-serif;
    color: #333;
    font-size: 13px;
    padding-left: 8px !important;
    border-color: #D1D1D1 !important;
  }
  
  .select2-selection__placeholder {
    color: #D1D1D1 !important; 
  }
  
  .form-unit .select2-container, .form-unit .select2-selection {
    width: 412px !important;
  }
  
  #tag-input .select2-selection--multiple {
    border: none !important;
    height: auto !important;
    padding: 0 !important;
  }
  
  #tag-input .select2-selection__rendered {
    padding: 0 !important; 
  }
  
  #tag-input .select2-search__field {
    height: 32px;
    border-radius: 16px;
    background-color: #D0F3FF;
    border: none !important;
    padding-left: 16px !important;
    padding-right: 16px;
    width: 104px !important;
  }
  
  #tag-input .select2-search__field::placeholder {
    color: #aaa; 
  }
  
  #tag-input .select2-search__field:focus {
    border: solid 1px #00c983 !important;
    background-color: #fff;
  }
  
  #tag-input .select2-search__field:focus::placeholder {
    color: #d1d1d1;
  }
  
  #tag-input .select2-selection__choice {
    height: 32px;
    line-height: 32px;
    border-radius: 16px !important;
  }
  
  
  
  .form {
    margin-bottom: 40px;
    margin: 0 auto;
    width: 1302px;
    font-family: 'Open Sans', sans-serif;
  }
  
  .form-row {
    display: block;
    width: 100%;
    margin: 0 0 32px 0 !important;
  }
  
  .form-divided {
    display: inline-block;
  }
  
  .form-divided-left {
    margin-right: 32px;
  }
  
  .form-divided-right {
    margin-left: -4px;
    width: 412px;
  }
  
  .form-input-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #333;
  }
  
  .form-unit {
    position: relative;
    vertical-align: top;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" /&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet"&gt;
  
  &lt;div class="form-row"&gt;
      &lt;div class="form-unit form-divided form-divided-left"&gt;
        &lt;label for="emp-id" class="form-input-label"&gt;Pill Box&lt;/label&gt;
        &lt;select class="js-example-basic-multiple" name="states[]" multiple="multiple"&gt;
          &lt;option value="a1"&gt;Item A1&lt;/option&gt;
          &lt;option value="a2"&gt;Item A2&lt;/option&gt;
          &lt;option value="b1"&gt;Item B1&lt;/option&gt;
          &lt;option value="a1"&gt;Item C1&lt;/option&gt;
          &lt;option value="a2"&gt;Item C2&lt;/option&gt;
          &lt;option value="b1"&gt;Item C3&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;div id="tag-input" class="form-unit form-divided form-divided-right"&gt;
        &lt;label for="emp-id" class="form-input-label"&gt;Tag Input&lt;/label&gt;
        &lt;select class="js-example-basic-multiple" name="states[]" multiple="multiple"&gt;
          &lt;option value="a1"&gt;Item A1&lt;/option&gt;
          &lt;option value="a2"&gt;Item A2&lt;/option&gt;
          &lt;option value="b1"&gt;Item B1&lt;/option&gt;
          &lt;option value="a1"&gt;Item C1&lt;/option&gt;
          &lt;option value="a2"&gt;Item C2&lt;/option&gt;
          &lt;option value="b1"&gt;Item C3&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"&gt;&lt;/script&gt;
  </code></pre>