'How to make button position beside select2?

How to make button position beside select2?, in my case I expect to have a 'Test' button at the same row and at the right side beside select2, I have tried the following:

<div class="card-body">
    <div class="row">
       <div class="col-lg-3">
           <label for="hsm_new_ticket">New ticket</label>
             <select class="form-select select2-single" id="hsm_new_ticket"></select>
       </div>
       <div class="col-lg-1">
           <button class="btn btn-block btn-secondary btn-sm"          
            id="btnTest_hsm_new_ticket" type="button"
            onclick="alert('I m here')">
            Test
          </button>
      </div>
   </div>
 </div>

screenshot

htmltwitter-bootstrap


Solution 1:[1]

   <div class="card-body">
    <div class="row">
        <div class="col-lg-3" style="display:flex; justify-content:center;     align-items: flex-end;">
            <div class="col-lg-11">
                <label for="hsm_new_ticket">New ticket</label>
                <select class="form-select select2-single" id="hsm_new_ticket"></select>
            </div>
        </div>
        <div class="col-lg-1" style="display:flex; justify-content:center;     align-items: flex-end;">
            <label for="hsm_new_ticket"></label>
            <button class="btn btn-block btn-secondary btn-sm" id="btnTest_hsm_new_ticket" type="button" onclick="alert('I m here')">
            Test
          </button>
        </div>
    </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions