JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<div class="container needs-validation" >
  <div class="form-group">
    <label for="combo">Example: </label>
    <select class="form-control" id="combo">
      <option>AAAAAAA AAAA</option>
      <option>BBBBBBB BBBB</option>
      <option>CCCC CCCCCCC</option>
      <option>DDDDDDDDDDDD</option>
      <option>EEEEEEEEEEEE</option>
      <option>FFF FF FFFFF</option>
      <option>GGGGGGGGGGGG</option>
      <option>HHIHIHHHHHHH</option>
      <option>JKJKJK</option>
    </select>
    <div class="invalid-feedback">
    Error Example
    </div>
  </div>
</div>

CSS

.select2-container--bootstrap {
    display: block;
}

    .select2-container--bootstrap .select2-selection {
        border-radius: 0.25rem;
        background-color: #fff;
        border: 1px solid #ced4da;
        color: #495057;
        font-size: 1rem;
        outline: 0;
    }

        .select2-container--bootstrap .select2-selection.form-control {
            border-radius: 0.25rem;
        }

    .select2-container--bootstrap .select2-search--dropdown .select2-search__field {
        border-radius: 0.25rem;
        background-color: #fff;
        border: 1px solid #ced4da;
        color: #495057;
        font-size: 1rem;
    }

    .select2-container--bootstrap .select2-search__field {
        outline: 0;
        /* Firefox 18- */
        /**
     * Firefox 19+
     *
     * @see http://stackoverflow.com/questions/24236240/color-for-styled-placeholder-text-is-muted-in-firefox
     */
    }

        .select2-container--bootstrap .select2-search__field::-webkit-input-placeholder {
            color: #868e96;
        }

        .select2-container--bootstrap .select2-search__field:-moz-placeholder {
            color: #868e96;
        }

        .select2-container--bootstrap .select2-search__field::-moz-placeholder {
            color: #868e96;
            opacity: 1;
        }

        .select2-container--bootstrap .select2-search__field:-ms-input-placeholder {
            color: #868e96;
        }

    .select2-container--bootstrap .select2-results__option {
        padding: 0.375rem 0.75rem;
        /**
     * Disabled results.
     *
     * @see https://select2.github.io/examples.html#disabled-results
     */
        /**
     * Hover state.
     */
        /**
     * Selected state.
     */
    }

        .select2-container--bootstrap .select2-results__option[role=group] {
            padding: 0;
        }

        .select2-container--bootstrap .select2-results__option[aria-disabled=true] {
            color: #868e96;
            cursor: not-allowed;
    ...

JavaScript

$(document).ready(function(){

	$('#combo').select2
  ({
  	theme: 'bootstrap'
  });
  
  $("#combo + span").addClass("is-invalid");
  
  $("#combo + span").focus(function(){
  	$(this).addClass("is-invalid");
  })

});