Appearance is handled by CSS so you can check out their stylesheet to find out exactly how they do it. I know how “I” accomplish that look. Make sure you use <label> tags to wrap the description of each form field. Include the “for” attribute and set it to the id of the form field it goes with. Then style the label tag with position: absolute and define a width (say 5em). Then set a left margin on all the form elements; use the same value plus an additional em or 2 for spacing, say 6-7em). You’ll note that they’ve kept the text for each field very short so it fits on one line. You don’t “have” to but it does look nicer.
The span probably isn’t a great idea, the break element isn’t semantic and there’s nothing whatsoever to indicate that “Your name” is tied to the text box. That’s a huge accessibility issue. Especially since in the case that this falls apart, your user won’t even know that this is required. More importantly for you, this tag soup is why you’re having styling problems and you can’t get it to look the way you want.
The list gives a more logical structure, the label and the form field are clean, understandable semantic units and the for attribute of the label ties them together (note: you need to add the id attribute to the form field)
Then you need to include these declarations in your style sheet. You can use any other declarations to style the labels and form field you want as long as you don’t override these elements. (note: I added an additional class to your textbox on the assumption you’d want all your textboxes to work this way.