How to drag/re-position inspect element tool in google chrome?

My answer is based on Chrome 59 but currently applies to previous versions since then.

As shown in image, you can click the 3 vertical dots on top right, then the menu below will appear, there you can click on your preferred arrangement (the darkened box portion shows where you would like to put the toolbar). In your case select the icon which has the bottom arrangement.

You should be able to click and hold the little "two squares" icon next to the "close" icon, and it will reveal an option to move the DevTools to the bottom:

The half-filled rectangle will move the DevTools to the side/bottom, and the overlapping squares will pop the DevTools out of your browser into a separate window.

Just before the close icon in inspect element , there is docking icon.
If the docking is like single box icon, just click on it to toggle the inspect element between bottom and right.
If the docking icon is like double box icon , press the icon ,hold it and then move the cursor to the single box icon(which appears shortly after pressing the icon).
For more information visit here.

In case you are a keyboard shortcut guy,

• If you are in windows Cntrl + Shift + D
• In OSX ⌘ + Shift + D