full
<div class="box">
  <div class="short">Lorem, ipsum dolor.</div>
  <div class="long">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
</div>
<div class="box">
  <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
  <div>Lorem, ipsum dolor.</div>
</div>
500px
<div class="box" style="width: 500px">
  <div class="short">Lorem, ipsum dolor.</div>
  <div class="long">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
</div>
<div class="box" style="width: 500px">
  <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
  <div>Lorem, ipsum dolor.</div>
</div>
300px
<div class="box" style="width: 300px">
  <div class="short">Lorem, ipsum dolor.</div>
  <div class="long">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
</div>
<div class="box" style="width: 300px">
  <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
  <div>Lorem, ipsum dolor.</div>
</div>

.box {
  display: flex;
  font-size: 18px;
  background: #fed;
  margin: 1ex;
}

.box > div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #def;
  margin: 0 1ex;
  flex: 1 1 0;
  max-width: fit-content;
}