JSFiddle - React, Tailwind, and code Playground

by Ying Chor Ding

HTML

<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

CSS

ul {
  list-style-type: none
}

li {
  display: grid;
  grid-template-columns: 20px auto;
  justify-content: start;
  align-items: center;
}

li::before {
  content: "\0021ac";
  font-size: 10px;
  color: #999;
}

JavaScript

//$("#div1").resizable();
$('#div1').resize(function(){
   $('#div2').width($("#parent").width()-$("#div1").width()); 
});
$(window).resize(function(){
   $('#div2').width($("#parent").width()-$("#div1").width()); 
   $('#div1').height($("#parent").height()); 
   
/*    var div1width = $(".div1").width() / $('.div1').parent().width() * 100;
   // Paste percentage into the inputs
   $('.div1').val(div1width);
   
   var div2width = $(".div2").width() / $('.div2').parent().width() * 100;
   // Paste percentage into the inputs
   $('.div2').val(div2width); */
});