Ordering two columns, avoiding skip to new line

Question

I am trying to create a page that shows a label and the corresponding text (might be multi-line), but I do not get the lines from the label and the text in the same line.

HTML Code:

  <label for='name'>Name:</label>
 <div class='input' id='name'> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
<label>Date:</label>
<div class='input' id='date'> 10.10.2012 </div>

<label>Sum:</label>
<div class='input' id='sum'>ABC </div>

CSS:

label {

width:150px
float: left;

}

.input{
margin-left:150px
}

Here is the JSFiddle Link

Answer 1

You lost in your style ; after width:150px

Try this: JS Bin

label {
  width:150px;
  float: left;
}

Answer 2

Semicolon ; is missing after width:150px

Correct it. It works

DEMO

Answer 3

Missing ";" after 150px and clear:both after div

   label {
        width:150px;
        float: left;
        display: block;
        border: 1px solid red;   
    }
    .input{
        margin-left:150px;
    }

    br {
       display: block;
       clear: both;
    }

http://jsfiddle.net/DGolub/msvVc/1/

Answer 4

Try this:

.input{
  display:inline
}

Answer 5

Put display:block; in .input:

.input{
margin-left:150px;
display: block;
}