title: Display: table-cell image and text on single line (responsive design)
body: <p>I want to have list item that has a profile picture in the left hand side and Name in the right hand side. The name should be on a single line with <code>overflow:hidden</code>.</p>
  
  <p>How can this be done with responsive widths and heights? I managed to do this with pixels but not with %.</p>
  
  <p>Example:
  <img src="https://i.stack.imgur.com/m9N5x.jpg" alt="example"></p>
  
  <p>JSFIDDLE: <a href="http://jsfiddle.net/NjqpC/" rel="nofollow noreferrer">http://jsfiddle.net/NjqpC/</a></p>
  
  <pre><code>html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
  }
  .first {
    width: 8%;
    height: 3%;
  }
  .second {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .third {
    border: .1em solid;
    font-size: .8em;
    max-height: 100%;
    display: table;
  }
  .third img {
    max-width: 100%;
    display: table-cell;
  }
  .third span {
    display: table-cell;
    vertical-align: middle;
    overflow:hidden;
  }
  
  &lt;div class='first'&gt;
    &lt;ul class='second'&gt;
      &lt;li class='third'&gt;
        &lt;img src='http://static.wikiartis.com/img/profile-small.gif'&gt;
        &lt;span&gt;First-Surname Family-name&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>