Datatable BS4 responsive dynamic resize issue

When you dynamically resize the div in which the datatable resides, it does not adjust.

Please see the demo I created on CodePen.

I am using Datatable with BS4 styles which uses the responsive add-on (all resources are added to the codepen).

On the demo, try toggling the sidebar and you will see the issue:

There is just one solution that works - by resizing the datatable with a delay so it kicks in after the css resize:

setTimeout(function() {    
   var DataTable = $(".dataTable").DataTable();
   DataTable.columns.adjust().responsive.recalc();
}, 300);

But that's not elegant, since we have no way to know when the CSS animation will end and the resizing will not be smooth.

Does anyone know or can come up with a better solution? One which will make the DataTable shrink together with the sidebar?