So what I ended up doing is "moving" the form to wrap the list rather than entire contents, post filter initialization. By doing so, my from is just AFTER the filter form, removing the nesting issue. Not my preferred option but it works.
-
$( '#the-list' ).wrap( $( '#the-form' ).clone().children().remove().end() );
-
$( '#the-form' ).contents().unwrap();
Note: In the fiddle the JavaScript code seems to work but you'd want to "move" the form post-widget initialization. Such as in $(document).on('pageinit', function(){});