JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="header-size-section">
    <div class="lable-size-section">
        <select class="form-control size-list" id="table-size-list" name="table-size-list" onchange="tableSizeChanged(this)">
            <option>25</option>
            <option>50</option>
            <option>100</option>
            <option>all</option>
        </select>
    </div>
    <div class="header-search-section">
        <span class="table-search-list">Search: </span>
        <input type="text" class="search-table" />
    </div>
</div>

CSS

.bootstrap-table .table:not(.table-condensed), 
.bootstrap-table .table:not(.table-condensed) > tbody > tr > th, 
.bootstrap-table .table:not(.table-condensed) > tfoot > tr > th, 
.bootstrap-table .table:not(.table-condensed) > thead > tr > td, 
.bootstrap-table .table:not(.table-condensed) > tbody > tr > td, 
.bootstrap-table .table:not(.table-condensed) > tfoot > tr > td {
    padding: 2px 3px 2px 3px;
}

.header-size-section {
    display: flex;
    font-weight: 600;
    margin-bottom: 2px;
}

.size-list {
    padding-bottom: 1px;
    padding-top: 1px;
}

.table-search-list {
    margin: 0px;
    display: table-cell;
    vertical-align: middle;
    padding: 6px;
}

.search-table {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.header-search-section,
.lable-size-section {
    display: inline-table;
}

header-size-section > header-search-section {
    float:right;
}