如何正确对齐标签和跨度

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

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 2

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 3

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.

Answer 4

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%;
}