JSFiddle - React, Tailwind, and code Playground

by died

HTML

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<ul id="sortable">
  <li class="">1</li>
  <li class="">2</li>
  <li class="">3</li>
  <li class="">4</li>
  <li class="">5</li>
  <li class="">6</li>
  <li class="">7</li>
  <li class="">8</li>
  <li >9</li>
  <li class="">10</li>
  <li class="">11</li>
  <li class="">12</li>
</ul>

CSS

#sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
  #sortable li { box-sizing: border-box;margin: 0; padding: 0px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; background-color:Azure;border:soild;border: 1px solid #d3d3d3; }
.x{width: 200px; height: 180px;}

JavaScript

$('li').each(function(){
    $(this).click(function(){
        if($(this).width()==98) {$(this).width(198);$(this).height(178);}
        else{$(this).width(98);$(this).height(88);}
    });
});