title: CSS: Transition not working on hover
body: <p>I have a box containing an image and a username. Initially the width is fixed to save space and on <code>hover</code> I want the division to expand to reveal the full content. I have achieved this but I am not able to add <code>transition</code> to make the animation smooth. </p>
  
  <p>Why is it not working?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.peer-person {
    position: relative;
    z-index: 1000;
    width: 9.5%;
    min-width: 66px;
    margin: 0px 0px 5px 0px;
    padding: 6px 0px 5px 0px;
    display: inline-block;
    border: 2px solid #efefef;
    border-radius: 5px;
    -webkit-transition: all 1s ease-in-out 0s;
    -moz-transition: all 1s ease-in-out 0s;
    transition: all 1s ease-in-out 0s;
  }
  
  .hover-container:hover&gt;.peer-person {
    z-index: 1001;
    background-color: white;
    width: auto;
  }
  
  .hover-container {
    display: inline-block;
    width: 9.5%;
    min-width: 66px;
  }
  
  .peer p {
    margin: 0px;
    padding: 3px;
    padding-bottom: 0px;
    color: grey;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="hover-container"&gt;
  &lt;span class="peer-person"&gt;
  &lt;a href="#" role="button" class="peer" aria-expanded="false"&gt;
  &lt;img src="http://via.placeholder.com/36x36" class="img-circle"&gt;
  &lt;p&gt;1.LONGUSERNAMELONGLONG&lt;/p&gt;
  &lt;/a&gt;
  &lt;/span&gt;
  &lt;/span&gt;
  &lt;span class="hover-container"&gt;
  &lt;span class="peer-person"&gt;
  &lt;a href="#" role="button" class="peer" aria-expanded="false"&gt;
  &lt;img src="http://via.placeholder.com/36x36" class="img-circle"&gt;
  &lt;p&gt;2.LONGUSERNAMELONGLONG&lt;/p&gt;
  &lt;/a&gt;
  &lt;/span&gt;
  &lt;/span&gt;
  &lt;span class="hover-container"&gt;
  &lt;span class="peer-person"&gt;
  &lt;a href="#" role="button" class="peer" aria-expanded="false"&gt;
  &lt;img src="http://via.placeholder.com/36x36" class="img-circle"&gt;
  &lt;p&gt;3.LONGUSERNAMELONGLONG&lt;/p&gt;
  &lt;/a&gt;
  &lt;/span&gt;
  &lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>