JSFiddle - React, Tailwind, and code Playground

by XarX

HTML

<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.bundle.min.js"></script>
<table>
<tr>
  <td>
    <select class="form-select" multiple aria-label="multiple select example">
      <option value="0">Strahd</option>
      <option value="1">Brann</option>
      <option value="2">Cadwell</option>
      <option value="3">Colin</option>
      <option value="4">Siegfried</option>
    </select>    
  </td><td>
    <select class="form-select" multiple aria-label="multiple select example">
      <option value="0">Misses</option>
      <option value="1">Hits</option>
      <option value="2">Mitigates</option>
      <option value="3">Succeeds on a save</option>
      <option value="4">Fails on a save</option>
    </select>    
  </td><td>
    <select class="form-select" multiple aria-label="multiple select example">
      <option selected>None</option>
      <option value="0">Strahd</option>
      <option value="1">Brann</option>
      <option value="2">Cadwell</option>
      <option value="3">Colin</option>
      <option value="4">Siegfried</option>
    </select>    
  </td>
</tr>
</table>

CSS

.form-select[multiple] {
  height: 150px;
}