CSS styling divs and paragraphs

CSS styling divs and paragraphs

I have a page wich gives me two problems when I try to style it using CSS.
First the code:
HTML:
<div class="formarea">
<div class="formimg">Du själv:</div>
<div class="formtext">
<p class="inhead">Personuppgifter:</p>
<p class="tdone" id="namespan">Namn</p> <p
class="tdtwo"><input type="text" name="graduate[name]" id="name"
/></p>
<p class="tdone" id="addrspan">Adress</p> <p
class="tdtwo"><input type="text" name="graduate[address]"
id="address" /></p>
<p class="tdone" id="postspan">Postadress</p> <p
class="tdtwo"><input type="text" name="graduate[postal]"
id="postal" /></p>
<p class="tdone" id="mailspan">E-post</p> <p
class="tdtwo"><input type="text" name="graduate[email]" id="email"
/></p>
<p class="tdone" id="phonspan">Mobilnummer</p> <p
class="tdtwo"><input type="text" name="graduate[phone]" id="phone"
/></p>
<p class="tdone" id="pnrspan">Personnummer</p> <p
class="tdtwo"><input type="text" name="graduate[pnr]" id="pnr"
/></p>
<p class="inhead">Matalternativ:</p>
<p class="tdone">Vegetarian (vegan etc. fyll även i detta
nedan)</p><p class="tdtwo"><input type="checkbox"
name="graduate[veg]" value="Ja" /></p>
<p class="tdone">Allergier och andra matpreferenser</p><p
class="tdtwo"><textarea name="graduate[allergies]"
id="allergies"></textarea></p>
<p class="inhead">Alkoholalternativ:</p>
<p class="tdone">Öl</p><p class="tdtwo"><input type="radio"
name="graduate[drink]" value="Öl" checked /></p>
<p class="tdone">Cider</p><p class="tdtwo"><input type="radio"
name="graduate[drink]" value="Cider" /></p>
<p class="tdone">Alkoholfritt</p><p class="tdtwo"><input
type="checkbox" name="graduate[alcfree]" value="Ja" /></p>
</div>
</div>
And the CSS: body { }
.formarea {
margin:auto;
margin-top:25px;
padding:0px;
border:none;
width:364px;
position:relative;
background-color:#eeeeee;
}
.formimg {
margin-top:0px;
margin-left:0px;
padding:0px;
border:none;
width:45px;
height:45px;
background-color:#dddddd;
}
.formtext {
margin-top:-45px;
margin-bottom:0px;
margin-left:64px;
padding:0px;
border:none;
width:300px;
float:left;
clear:both;
background-color:#cccccc;
}
.inhead {
margin-top:0px;
margin-bottom:2px;
padding:0px;
border:none;
width:300px;
font-size:20px;
}
.tdone {
margin-top:2px;
margin-bottom:2px;
padding:0px;
width:150px;
float:left;
text-align:left;
}
.tdtwo {
margin-top:2px;
margin-bottom:2px;
padding:0px;
width:150px;
float:left;
text-align:left;
}
.tdtwo input {
margin-top:0px;
margin-bottom:0px;
width:150px;
}
.tdtwo textarea {
margin-top:0px;
margin-bottom:0px;
width:150px;
}
Here is a picture if the result:

As you can see, the code works fine down to "Matalternativ:", but then
something strange happens. I have managed to figure out that the reason
for this is because the text needs two roads. The simple (but very ugly)
solution is to ingrease the height of ".tdone" and ".tdtwo" to a number
above the height of two lines, but it is not very good.
I also tried toying with the overflow property, but that didn't seem to
help me.
This makes two questions:
1: There are reasons for not wanting an id because that won't help me
later in parts of the code not shown here where the same problem will
appear. Is there a css property that will help me when a line is too high
other than putting an id on that particular element?
2: As you can see, the radiobuttons and checkboxes align in the center of
the paragraph they populate. I have tried "text-align:left;" and
"Float:left;" inside ".tdtwo input" which didn't make any difference. Is
there some way to make the move to the left in the paragraph?