Can't always drag draggable element into empty sortable list that has its height set on start of dragging

Can't always drag draggable element into empty sortable list that has its height set on start of dragging

I have a draggable element and two sortable elements which are empty (meaning their height is 0).

I am using connectWithSortable to drag the draggable element into one of the sortable elements. This only works if the draggable element will fit into the sortable element (i.e it's height allows for it).

By giving the sortable elements a height of 100px, it works:  https://jsfiddle.net/cekwuyq1/

However, I don't want the sortable elements to have this empty space of 100px. Instead, I want their height to increase to 100px when a draggable element is dragged. By using start, I can detect that the dragging of a draggable element has started, and set the sortable elements height to 100px.

However, for some reason, the draggable element does not always connect to the sortable elements - it's quit tempermental and sometimes works, sometimes doesn't. It seems to be something to do with setting the height of the sortable elements when the dragging of the draggable element starts.

JsFiddle:  https://jsfiddle.net/v9y0L2n1/