Keep dataTables_info and dataTables_paginate on each side of the table, and buttons in-between

UdiD

I want to make the .dataTables_paginate and .dataTables_info elements to act in the following way:

First, I'd like each to be positioned and each under the table (info under the bottom-left corner, and paginate under the bottom-right corner).
Second, If the window is narrowed from the left, info and paginate should be pushed to the left, too (and eventually disappear from view). If the window is narrowed from the right, they should be covered (and again, disappear from view).

Currently, To achieve the above, I made "float:left" for dataTables_wrapper, and it works, but I don't if that make sense. Otherwise, .dataTables_paginate is under the bottom-right corner of the visible window. See my fiddle bellow.

Third, I'd like that my added buttons (used with Bootstrap's classes) will have the same behavior.

Current fiddle.

Added: I now see that what I did was not good, since in case the table has no rows, everything get messed up...