How to create a Line Item with vertical middle aligned text? - html

Question

I am having trouble creating line items with the following requirements:
Line items contain: top/left aligned icon, title, and optional subtitle
Text should be vertical align middle
Width of the container is dynamic
Here is a Fiddle:
http://jsfiddle.net/6ug3314b/
Problem:
I cannot figure out how to get this CSS to work without hard coding the width of something. See the JS Fiddle link above.
I can't figure out how to get the ".licontent" div from wrapping to the next line without knowing the width of the container.
Here is the CSS so far:
.lineItems {
list-style: none;
padding: 0;
}
.lineItems > li {
border: 1px solid #eaeaea;
}
.lineItems .title {
margin: 0;
}
.lineItems .licontent {
display: inline-block;
vertical-align: middle;
padding-left: 10px;
}
.lineItems .icon {
display: inline-block;
vertical-align: middle;
width: 50px;
height: 50px;
border: 1px solid red;
}
.lineItems .icon:after {
content: 'ICON';
}

Answer 1

Straight forward, if I understood correctly. You just need to add a % based width that works and a #media inquiry to reduce the % as needed since the image isn't also percentage based.
JSFIDDLE
.lineItems .licontent {
display: inline-block;
vertical-align: middle;
padding-left: 10px;
width:85%;
word-break: break-word;
}
#media screen and (max-width: 550px) {
.lineItems .licontent {width:73%}
}

Answer 2

Sounds like CSS table and table-cell could be a great solution. It supports both unknown width and vertical-align.
And use table-layout: fixed; + word-wrap: break-word; for wrapping long lines.
DEMO: http://jsfiddle.net/pn5pja7e/
.lineItems {
list-style: none;
padding: 0;
}
.lineItems > li {
display: table;
width: 100%;
table-layout: fixed; /*NEW*/
word-wrap: break-word; /*NEW*/
}
.lineItems .licontent {
display: table-cell;
vertical-align: middle;
padding-left: 10px;
/* word-break: break-all; */
border: 1px solid blue;
}
.lineItems .title {
margin: 0;
}
.lineItems .icon {
display: table-cell;
vertical-align: middle;
width: 50px;
height: 50px;
border: 1px solid red;
}
.lineItems .icon:after {
content: 'ICON';
}