JQuery UI: how can I dynamically set resizable () according to columns

I am resizing columns to col-md-6, but what if I want to resize columns to col-md-4, col-md-3, etc. I have to manually install the script according to the passes. I want to know how can I install a dynamic script.

Here is my code:

var innerDiv1 = $( '.col-md-6' );            
              innerDiv1.resizable({
                handles: 'e',
                minWidth : 430,
                maxWidth : 900,
                resize: function( event, ui ) {
                  var remainingSpace = $(this).parent().width() - $(this).outerWidth(true);
                  console.log('Remaining Space = '+remainingSpace);
                  var divTwo = $(this).next();
                  console.log('Div Two = '+divTwo);
                  var divTwoWidth = remainingSpace - ( divTwo.outerWidth(true) - divTwo.width() );
                  console.log('Div Two Width = ' + divTwoWidth);
                  divTwo.css( 'width', divTwoWidth + 'px' );
                }
              });

      

        
        
        
      

    

and here is my fiddle with col-md-6

Updated: violin col-md-4 , violin col -md-3 with col-md-4 and col-md-3 respectively

The problem is that in col-md-4 and col-md-3, when I resize the last or second column, it automatically falls under it, why!

To do this, I need to make evertime changes to max-width and min-width. I want to make it dynamic. I hope you understand

How can I dynamically set max and min width for each col-md - *

Try resizing the columns on the east side.