labelling-dropdown

by tnhu

HTML

<labelling-dropdown>
  <label>Application(s)</label>
  <a>
    <label>Test1, Test2. Test3, Test4, Test5, Test6, Test7, Test8</label>
    <span>^</span>
  </a>  
</labelling-dropdown>

SCSS

labelling-dropdown {
  display: inline-flex;
  height: 50px;
  align-items: center;
  align-content: center;
  
  > label {
    display: inline-block;
    margin-right: 10px;
  }
  
  > a {
    flex-grow: 1;
    display: inline-flex;
    border: 1px solid gray;
    padding: 5px;

    align-items: center;
    align-content: center;
    
    > label {
      flex-grow: 1;  
      width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }    
  }
}