please see below div:

<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>


<%for  id in 1..5 do%>  
 <div id="product_<%=id%>">     
   <div style ="height:10px;margin-top:10px;"></div>
   <span class="normal_cell"></span> 
   <span class="start_cell"></span>
   <span class="normal_cell"></span>
   <span class="normal_cell"></span>
   <span class="end_cell"></span>
   <span class="normal_cell"></span>
   <span class="normal_cell"></span>
 </div>
<%end%>

Here, the number of "normal_cell" between "start_cell" and "end_cell" varies(also before and after) for each row of product based on the start_date and and date of each product.

<style>
.normal_cell {
   float: left;
   width: 20px;
   height: 20px;
   background: yellow;
   border-right:1px solid gray;
   margin-right: 1px;

}

.start_cell, .end_cell {
  float: left;
  width: 20px;
  height: 20px;
  background: green;
  margin-right: 1px;
  border-right:1px solid gray;
}

</style>


<script>
   $(function() {   
     ApplyResizablePluginToCol($(".end_cell"));

     function ApplyResizablePluginToCol(elements){     
        elements.resizable({
           maxHeight: 20,
           minHeight: 20,
           distance: 5,
           handles: 'e',
           start: function() {
             console.log("I've started!");
           },
           stop: function() {
             console.log("I've stopped!");
           }
        });
     }  

 });
 </script>

How can I implement a chart resizable(both 'e' and 'w') in such a div. The number of cells in each row are equal. But the chart is drawn for each product between the start_cell and end_cell, based on the start and end date.

If I place a resize icon on the end_cell, then I can move it to right side properly,but to the left side, only a small area is movable.

Please help.

Thanks