In der "pull-left"-Klasse ist "float: left" definiert. Der Klassenname "pull-left" wurde von Steemit festgelegt und die Eigenschaften dieser Klasse bestimmen das Verhalten der betroffenen Elemente.

"float: left" (Englisch für "fließe: links") bewirkt, dass ein Block-Element nicht unbedingt die volle Breite ausschöpfen muss und dadurch nur wenn es zu eng wird einen Umbruch auslöst. Es fließt also im Prinzip an die linke Seite, anstatt ein fester Block über die gesamte Breite zu sein.

Da die maximale Breite 50% beträgt (ebenfalls von Steemit für "pull-left" so festgelegt) und das zweite <div> ebenfalls nach links geschoben wird, passt alles genau in einer Zeile ;)

Damit die Spalten die maximale Breite von 50% nutzen, habe ich das transparente Bild eingefügt. Beim ersten ganz oben brauchte ich es nicht, weil dort bereits ein <h2>-Element enthalten ist, was denselben Effekt hat, da es ein Block-Element über die volle Breite ist (erzeugt ja auch immer einen Umbruch).