Chrome's developer tools automagically choose vertical or horizontal panel layout, based on their width. You can disable that magic.
In the developer tools, klick the cogwheel icon (or press F1 when focusing the dev tools) to open the settings overlay.
Under "Preferences", in the "Appearance" section, find the "Panel layout" option. Set it to your liking.
Alternatively, press Ctrl+Shift+P and search for "panel layout".
Wat?
Vertical means that the DOM tree is next to the styles/etc panel, like so:
As you can see, that layout is very impractical for deeply nested DOM trees.
When docking the dev tools on the right side of your browser window, you almost always want a horizontal layout where the DOM tree is above the styles panel which can then show the computed styles:
