CodePen

HTML

            
              %ul
  %li
    .name bla
    .description bla bla bla
    .tags new, old, blue, borrowed
  %li.broken
    .name Broken
    .description shows the problem
    .tags.TARGET
      I want this long list of
      tags to grow the parent
      instead of overflowing
      into the next li.
  %li
    .name bla
    .description bla bla bla
    .tags new, old, blue, borrowed
  %li.fixed
    .name Fixed
    .description shows my solution
    .tags.TARGET
      This solution groes the
      li to fit the ammount of
      text in that is in this
      child.
  %li
    .name bla
    .description bla bla bla
    .tags new, old, blue, borrowed

            
          
!
via HTML Inspector

CSS

            
              li {
  min-height: 3.3em;
  overflow:hidden; /* or use clearfix hack etc... */
  .name,.description {
    margin:.5em auto .5em 0;
    float:left; /* float to the left */
    width:10em;
  }
  .tags {
    margin-left:10em; /* same with `.name & .description` width */
  }
}



// Styles to make the rest of this look nice
* { @include box-sizing(border-box); }
body { background: #888; color: #EEE; }
.TARGET { outline: 2px dashed rgba(red, 0.5); }
ul {
  width: 20em;
  margin: 1em auto;
  padding: 0;
  list-style-type: none;
  background-color: #333;
}
li {
  padding: 0.5em;
  border-top: 2px dotted #555;
  &:first-child { border-top: none; }
    .description { color: #888; }
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................