JSFiddle - React, Tailwind, and code Playground

by Dmitri Ganenco

HTML

<select multiple="" class="form-control" size=3>
    <option class="editable">1</option>
    <option class="editable">2</option>
    <option class="editable">3</option>
    </select

CSS

.masonrow {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 700px;
}

.item {
  display: inline-block;
}

.well {
  position: relative;
  display: block;
  padding: 0;
}

TypeScript

/*   $(".editable").dblclick(function(e) {
    if ($(event.target).attr('class') != "thVal") {
      e.stopPropagation();
      var currentEle = $(this);
      var value = $(this).html();
      updateVal(currentEle, value);
    }
  });
  
  function updateVal(currentEle, value) {
    $(document).off('click');
    $(currentEle).html('<input class="thVal" type="text" value="' + value + '" />');
    $(".thVal").focus();
    $(".thVal").keyup(function(event) {
      if (event.keyCode == 13) {
  
        $(currentEle).html($(".thVal").val());
      }
    });
  
  }
   */