How to block elements to wrap on text content?

Question

I have 2 divs that I want to position vertically, aligned to the left and I want their width to wrap based on the amount of text.

fiddle

.main {
  position: absolute;
  color: white;
}

.line {
  padding: 3px;
  margin: 2px;
  background-color: #505050;
}

<div class="main">
  <div class="line">Content content content content</div>
  <div class="line">Content content</div>
</div>

The reason why I am asking if there is a more straight forward solution is because I think that width: 0 and white-space: nowrap may affect different content.

Answer 1

As per i understand may be that's you want.

.main {
    color: white;
}
.line {
    padding: 3px;
    margin: 2px;
    background-color: #505050;
    float:left;
    clear:left;
}

Check this http://jsfiddle.net/2kmzK/1/