Bootstrap scrollable column with possibility to select

Question

I try to make a scrollable column where the user can select, search & scroll, something like this:

I'm not sure if I need a table for it, my code now:

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';

<div class="row" style="margin-top: 10px;">
  <div class="col-md-2">
    <div class="panel-title">Search or Select <span class="pull-right"><i class="fa fa-sort"></i></span>
    </div>
    <div class="form-group has-feedback" style="margin-top: 5px;">
      <input type="text" class="form-control input-sm" placeholder="search" />
      <span class="glyphicon glyphicon-search form-control-feedback"></span>
    </div>
    <div style="height: 100%; overflow: auto; border: 1px solid #ccc; border-radius: 3px">
      <table id="table" class="table table-hover table-no-borders">
        <tbody>
          <tr class="selected">
            <td>item</td>
          </tr>
          <tr>
            <td>item</td>
          </tr>
          <tr>
            <td>item</td>
          </tr>
          <tr>
            <td>item</td>
          </tr>
          <tr>
            <td>item</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Answer 1

there is no straight forward solution for your question

you should check out this link, i have good experiences with chosen and Select2

....

i think its not possible with pure HTML + CSS