how to align label and span properly - html

Question

I put together this fiddle
What I have is 2 divs and then one of them has 2 more divs in it. What I am trying to do it properly position label and span within second div
<div id="someotherdiv">
</div>
<div class="reportuserinfo">
<div class="leftdivinfo">
<label>Teacher:</label><span>Teacher Name</span><br/>
<label>District:</label><span>District Name</span><br/>
<label>School:</label><span>School Name</span>
</div>
<div class="rightdivinfo">
<label>Class:</label><span>Class Name</span><br/>
<label>Content:</label><span id="currcontent">Content</span><br/>
<label>Unit:</label><span id="currunit"></span>
</div>
</div>
If you look in fiddle right now label is floating to the right and so is span but they look strange, what I am attempting to accomplish is something like this on both sides of second div:
Teacher: Teacher Name
District: District Name
School: School Name
The way they look right now is
Teacher: Teacher Name
District: District Name
School: School Name
Thanks for your help.

Answer 1

I just added width:30%; in your css class ".reportuserinfo label" and it fixed the issue (fiddle). You need to define width in order to fix the text alignment issue. You can adjust space margins as per your requirements.
Here is how your code looks like to me now :-
.reportuserinfo label {
float: left;;
margin-right: 30px;
font-weight: bold;
text-align: right;
width:30%;
}

Answer 2

You should define a min-width style in your css apart from width:40% to ensure that the text you are trying to write does not scroll if browser width is decreased
.leftdivinfo {
float:left;
min-width: 200px;
width:40%;
background: yellow;
padding-left: 30px;
padding-right: 30px;
}

Answer 3

Have you tried using tables? You could enclose this information in a table, then right-align the text in the left column:
table {
border: none;
}
td:first-child {
text-align: right;
}
td {
padding: 5px;
}
<table>
<tr>
<td>Class Teacher:</td>
<td>John Smith</td>
</tr>
<tr>
<td>District:</td>
<td>Smithsville</td>
</tr>
<tr>
<td>School:</td>
<td>Smith's High School</td>
</tr>
</table>

Answer 4

Try setting width to auto and adding display:inline-block.
.leftdivinfo {
float:left;
width: auto;
background: yellow;
padding-left: 10px;
padding-right: 10px;
display:inline-block
}
Tables might be a better way to make this.
EDIT:
I see you want the colons aligned, add min-width:70px; to the label class.