JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<div class="wrapper">

  <div class="sidebar">
    Sidebar
  </div>
  <div class="main">

    <ul class="filters">
      <li style="background: yellow">
        <label>Country</label>
        <div class="value">
          United States of America
        </div> 
      </li>
      <li style="background: green">
        <label>Age</label>
        <div class="value">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
        </div>
      </li>
      <li style="background: cyan">
        <label>City</label>
        <div class="value">
          The City of Dallas
        </div>
      </li>

    </ul>

  </div>

</div>

SCSS

.wrapper{
  width: 600px;
  height: 500px;
  border: 3px solid blue;
  
  display: flex;
  
  .sidebar{
    background: blue;
    width: 60px;
    flex-grow: 0;
    flex-shrink: 0;
    color: white;
  }
  
  .main{
    flex-grow: 1;
  }
}

.filters{
  display: flex;
  border:3px solid red;
  padding: 5px;
  
  > li{
    display: flex;
    flex-grow: 1;
    min-width: 0;
    
    label{
      color: gray;
      margin-right: 5px;
    }
    
    .value{
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}