That's because you have used CSS to style then to be the same. Without CSS a span will not create a new line and its display is "inline" by default and therefore cannot take dimensions unless you change the display in some way (such as block,float or inline-block etc).
Note that you cannot nest block elements inside inline elements so the choice of a span is usually applied to text/content that is usually contained within a larger context (such as an odd word in a paragraph).
CSS doesn't care what most elements look like (form controls excluded) as you can always style then to suit. The more important question is "which tag is semantically correct to use in each situation ?". Don't confuse appearance with the structural semantics of html.
In your example above you have two snippets of separate text so the choice is not clear cut and a case could be made for a span or a div but using a span will limit you later on should you wish to add structural html inside the span. Indeed looking at your example the left span seems to be a logo of some sorts and therefore should be a more structural html element. If the logo was the main logo of the page then I tend to use an h1 for that and use a p element for the login. If its just a general logo then I would use a p element for both. If you feel that you may add more data later to those elements (popups or more html elements) then both should most likely be divs.