title: Inline-block elements next to each other -- preventing longer text from jumping below elements its next to
body: <p>"Firstname Lastname" stays top aligned to the little initials icon until it becomes too long in length, then it drops down underneath it. I'd like for it to maintain its position at the top even if the length increases. Not sure how to do this without using floats.</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>.user_img_color,
  .user_img_color_large {
    background: #8aa943;
    border-radius: 40px;
    color: #fff;
    float: left;
    font-size: 15px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 40px;
    z-index: 1;
  }
  .name-and-status {
    vertical-align: top;
  }
  #user-initials {
    margin-right: 5px;
  }
  .inline-block {
    display: inline-block;
  }
  .menu-user-info div {
    vertical-align: middle;
  }
  .container {
    width: 220px;
    background-color: #fff;
  }
  .welcome-message {
    margin-top: 10px;
    font-size: 11px;
    line-height: 15px;
  }
  div.status-indicator {
    display: inline-block;
    height: 8px;
    width: 8px;
    content: " ";
    line-height: 14px;
    background: #f5c002;
    border-radius: 8px;
    margin: 12px 2px 0 0;
    vertical-align: middle;
  }
  div.status-message {
    display: inline-block;
    font-size: 11px;
    line-height: 14px;
    white-space: nowrap;
    margin-top: 10px;
    vertical-align: top;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  
    &lt;div id="user-initials" class="inline-block"&gt;
      &lt;div class="user_img_color user_img_color-pending"&gt;FL&lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;div class="name-and-status inline-block"&gt;
      &lt;div class="employee-name"&gt;Firstname Lastname&lt;/div&gt;
      &lt;div class="status-indicator status-indicator-complete"&gt;&lt;/div&gt;
      &lt;div class="status-message"&gt;Process Status&lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;div class="welcome-message"&gt;
      Lorem ipsum dolor sit amet
      &lt;br&gt;adipiscing elit, sed do eiusmod.
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Fiddle: <a href="https://jsfiddle.net/63kn6ufr/1/" rel="nofollow noreferrer">https://jsfiddle.net/63kn6ufr/1/</a></p>