CSS multi line Labels align

Question

How could I align 2 labels with bottom alignments. if one label has multiple lines, the label next to it will appear from the top. could I align it to the bottom?

http://jsfiddle.net/ghkJC/3/

<div class="field">
  <div class="label">labl 1:</div>
  <div class="value">Some text</div>
  <br />
  <br />
</div>

<div class="field">
  <div class="label">this is a really really long label:</div>
  <div class="value">right after":" from previous label</div>
  <br />
</div>

.label {
    background: purple;
    float: left;      
    width: 100px;
    display: inline;
    vertical-align: 500px;

}

.value {
    background: red;
    width: 300px;
    float: right;

}

many thanks :)

Answer 1

Here are some options for you:

1. Use display:inline-block:

   .label {
       background: purple;
       width: 100px;
       display: inline-block;
   }
   .value {
       background: red;
       width: 300px;
       display: inline-block;
       vertical-align: bottom;
   }
   

   Demo fiddle

2. Use display:table and table-cell

   .field {
       display: table;
   }
   .label,.value{
       display: table-cell;
   }
   .label {
       background: purple;
       min-width: 100px;
   }
   .value {
       background: red;
       width: 100%;
       vertical-align: bottom;
   }
   

   Demo fiddle

3. Use position:absolute

   .field {
       position: relative;
   }   
   .label {
       background: purple;
       width: 100px;
   }
   .value {
       background: red;
       width: 300px;
       position: absolute;
       right: 0;
       bottom: 0;
   }
   

   Demo fiddle

Note: first two options won't work in IE < 8 (without some hacks)