JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a">
  <div class="b">
    <p>im a icon</p>
  </div>
  <div class="c">
    <p>im a teapot that is short and stout, here is my handle Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, mollitia, obcaecati. Amet, modi. Consequuntur sit asperiores veniam, cupiditate dolores iusto illo alias? Cupiditate, optio delectus voluptatum, ducimus nam inventore doloribus.</p>
  </div>
</div>

SCSS

* {
  box-sizing: border-box;
}

.a {
  width: 100%;
  display: flex;
  max-width: 500px;
  border: 1px solid red;
}

.b {
  min-width: 100px;
  display: block;
}

.c {
  flex: 1;
  background: yellow;
  max-width: calc( 100% - 100px );
  
  p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}