I was looking at the default CSS properties produced by each component. 
The main purpose of Toolbar is to display its children with an inline display 
(elements are placed next to each other), something Appbar doesn't do. 

The AppBar component uses display: flex and flex-direction: column, 
that means direct descendants are stacked on top of each other. 

On the other hand Toolbar uses display: flex too, but doesn't 
set flex-direction, which means it uses its default value: row. 
That is the reason why elements are placed next to each other inside 
Toolbar components.