Anordnung Input-Element mit CSS

Ich habe ein Formular, in dem tabellenähnlich mit CSS einige Daten rausgeschrieben werden sollen:

<span class='t.pname'><input type='checkbox' value='1' name='Ackerbohnen' checked><a id='Ackerbohnen1' href='#'>Ackerbohnen</a></span> <span class='t-sorte'>Winterbohnen</span> <span class='t-funk'>Hauptkultur</span> <span class='t-herk'>Aussaat</span> <span class='t-aussaat'>150217</span> <span class='t-erntevon'>310517</span> <span class='t-erntebis'>E0617</span>

CSS:

span.t-pname { width: 100px; } span.t-sorte { width: 100px; float:left; } span.t-funk { width: 100px; float:left; } span.t-herk { width: 100px; float:left; } span.t-aussaat { width: 55px; float:left; } span.t-erntevon{ width: 55px; float:left; } span.t-erntebis{ width: 55px; float:left; }

Das erste Feld (input-Element) wird jedoch erst am Ende gereiht (auch wenn in ‚t-pname; float:left‘ steht):

Winterbohnen, Hauptkultur, Aussaat, 150217, 310517, E0617, Ackerbohnen mit Checkbox.

Wie bekomme ich hier die Checkbox am Anfang der Ausgabe?

[ol]
[li]Den falsch benannten Klassennamen im HTML korrigieren.[/li][li]float:left ergänzen, und width-Regel entsprechend aufstocken, damit im ausreichend Platz gegeben ist, was bei mir eben nicht der Fall war.[/li][/ol]
Fiddle-Demo: https://jsfiddle.net/SpiceLab/zdekxh3h/

Danke, war ja einfach. Hab’s einfach nicht gesehen.