JSFiddle - React, Tailwind, and code Playground

HTML

<div class="master">
  <div class="left">
    <div class="profile">
      <div class="image">
      </div>
      <div class="text">
        <div class="name">
          Some short name
        </div>
        <div class="description">
          Some very long description that's most likely to overflow here
        </div>
      </div>
    </div>
  </div>
</div>

SCSS

.master {
  
  .left {
    width: 40%;
    background-color: cyan;
    height: 50px;
    padding: 5px 0;
    
    .profile {
      padding: 5px 0;  
      display: flex;
      flex-direction: row;
      
      .image {
        height: 40px;
        width: 40px;
        margin-right: 5px;
        background-color: orange;
      }  
      
      .text {
        display: flex;
        flex-direction: column;
        
        .name {
          color: red;
        }
        
        .description {
          color: blue;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-wrap: normal;
        }
      }
    }
    
    
    
    
  }
}