JSFiddle - React, Tailwind, and code Playground

by qunzorez

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
 <div class="form-group">
   <div class="input-group mb-3">
     <select class="form-select">
       <option value="1" data-select2-id="2" style="width: 100%;">SEWING MACHINES 14H TAJIMA / SEWTSW14</option>
       <option value="2" data-select2-id="11">SEWING MACHINES 12H TAJIMA / SEWTSW12</option>
       <option value="4" data-select2-id="12">FINAL ASSEMBLY SWH / FASWH</option>
       <option value="5" data-select2-id="13">FINAL ASSEMBLY HOD / FAHOD</option>
       <option value="6" data-select2-id="14">SMALL CUTTING MACHINES / CUTM01</option>
       <option value="7" data-select2-id="15">BIG CUTTING MACHINES / CUTM02</option>
       <option value="8" data-select2-id="16">PRE-ASSEMBLY. BURNING / LINM03</option>
       <option value="9" data-select2-id="17">PREPARATION AREA 1 / LINM01</option>
       <option value="10" data-select2-id="18">PREPARATION AREA 2 / LINM02</option>
       <option value="11" data-select2-id="19">PREPARATION AREA HOD / LINM05</option>
       <option value="12" data-select2-id="20">MANUAL CUTTING MACHINE / SM-CUT01</option>
       <option value="13" data-select2-id="21">KISS-CUT MACHINE / CUTP01</option>
       <option value="14" data-select2-id="22">SEWING MACHINES 10H TAJIMA / SEWTFS10</option>
       <option value="15" data-select2-id="23">LAMINATION MACHINE / LAMM03</option>
       <option value="16"...

CSS

.input-group > .select2-container--bootstrap {
    width: auto !important;
    flex: 1 1 auto !important;
}

    .input-group > .select2-container--bootstrap .select2-selection--single {
        height: 100% !important;
        line-height: inherit !important;
        padding: 0.5rem 1rem !important;
    }

JavaScript

$(document).ready(function () {
    $('select.form-select').select2({
        theme: 'bootstrap',
    });
});