JSFiddle - React, Tailwind, and code Playground

by duarteleao

HTML

<div class="container">
  <select class="files-list" multiple>
    <option class="file icon xcdf">
      <div>fi</div>  
    </option>

    <option class="file icon xcdf">Very long text that goes off the list width</option>
    <option class="file icon xcdf">A</option>
    <option class="file icon xcdf">B</option>
    <option class="file icon xcdf">C</option>
    <option class="file icon xcdf">D</option>
    <option class="file icon xcdf">E</option>
  </select>
</div>

CSS

html, body {
  font-size: 14px;
  line-height: 20px;
}

select {
  width: auto;
  overflow: hidden;
  border: 0;
}

.container {
  width: 150px;
  height: 150px;
  overflow: auto;
}

.icon::before {
  display: inline-block;
  content: "";
  height: calc(1em * 25 / 14);
  width:  calc(1em * 25 / 14);
  vertical-align: -0.35em;
  background-position: 0;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 0.5em;
}

.icon.xcdf::before  {
  background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Deletion_icon.svg/600px-Deletion_icon.svg.png);  
}

JavaScript

$(document).ready(function() {
  var filesList = document.querySelector(".files-list");
  
  // Should always show as a listbox (> 1),
  filesList.size = Math.max(2, filesList.options.length);
});