How to make inline-block elements to grow vertically - html

Question

I have two inline-block elements (first image). The first one has fixed width. The second one doesn't have fixed width because the container may grow horizontally so it should fill it.
When second element text is large (second image) then it wraps down.
But what I want is the element to grow vertically (third image).
I need also text to preserve line breaks.

Answer 1

You can apply max-width: calc( 100% - LABEL_WIDTH ) to your .element class. Replace LABEL_WIDTH with the width of the label. This way you can define a width in em for the label instead of using two percentual values.
See this JSFiddle for a working example: http://jsfiddle.net/QL78X/2/
See this link for a table of browsers supporting calc(): http://caniuse.com/calc
li {
display: inline-block;
vertical-align: top;
list-style-type: none;
}
.label {
width: 7em;
}
.element {
width: calc( 100% - 7em );
white-space: pre-line;
}

Answer 2

Here's a fiddle: http://jsfiddle.net/Pv8yH/1/
Basically, I've set a width on the label, then set a max-width on the element. I've set the white-space to 'nowrap' so that the second LI doesn't wrap down. Then I have to make sure that white-space is reset back to 'normal' within the LI itself. The max-width is just for show, really, the magic is the white-space property (at least in terms of your question).
ul { white-space: nowrap; }
ul li {
display: inline-block;
white-space: normal;
}
li.label { width: 30%; vertical-align: top; background: red; }
li.element { max-width: 70%; background: green; }
NB. If you are setting a width in ems for the first element, it may be tricky to get it to all fit. It will flow like you want, but you will definitely have to tweak it to make it look nice.

Answer 3

You can use
float:left;
Check this example here:
http://jsfiddle.net/3M5MF/

Answer 4

I suggest you use max-width on the right element. I did an example here: http://codepen.io/mattdrose/pen/qCLzG?editors=110
.field__item {
display: inline-block;
vertical-align: text-top;
}
.field__item--1 {
width: 30%;
}
.field__item--2 {
max-width: 70%;
}
I use percentages, but you can replace these with your preferred method.
However, I think you should use floats so you don't have to deal with the html white space when calculating your widths.

Answer 5

I used relative position of container with fixed height http://jsfiddle.net/6qMvy/
.container{
width: 400px;
height: 600px;
position: relative;
}
.left{
width: 100px;
position: absolute;
}
.right{
position: absolute;
left: 120px;
}