Question

I got this:

Demo.

And I would like this result:

I got this far:

Demo.

Answer 1

There are 2 ways you can do this in a flexible way. Both remove the need for floats (and clearing floats) and neither requires JavaScript to achieve.

The first is to use flexbox. The advantage here is that if there isn’t enough room for the elements to fit comfortably on one row, they’ll adapt. The down side is that IE10 is the first version of IE to support it. As a fallback, you’ll need to use display: inline-block on each of the elements with flex applied to them.

http://jsfiddle.net/n4Yzc/7/

.always-visible {
    display: flex; /* prefixed attribute: -moz-flex, -webkit-flex */
    align-items: stretch; /* prefixed property: -moz-align-items, -webkit-align-items */
    flex-flow: row wrap; /* prefixed property */
}

.toggle-me {
    background-color: green;
    flex: 1 1 5em; /* prefixed property */
} 

.name-mail {
    background-color: red;
    flex: 1 1 8em; /* prefixed property */
}

.description {
    background-color: yellow;
    flex: 2 1 50%; /* prefixed property */
}

.favourite-food {
    background-color: orange;
}

The second is to use the display: table properties. This solution is well supported (IE8+), but it ends up looking squished on narrower devices.

http://jsfiddle.net/n4Yzc/5/

.always-visible {
    display: table;
}

.toggle-me {
    background-color: green;
    display: table-cell;
} 

.name-mail {
    background-color: red;
    display: table-cell;
}

.description {
    background-color: yellow;
    display: table-cell;
}

.favourite-food {
    background-color: orange;
}