JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="lside">
    <div>
    <b>111 fas;fkljsdklfjkjs wrweoriuowieruoweiur as;ldkfjkljl;kj weroiuqwerpoiuasdfklj dsalkfj ewroieuroiu werousdfoiua awerwer</b>
    </div>
  </div>
  <div class="rside">
    333
  </div>
</div>

CSS

.main {
  display: flex;
  margin: 20px;
  border: 2px solid red;
  padding: 20px;
}
.lside {
  background: salmon;
  flex: 1 0 400px;

}
.rside {
  background: yellow;
  flex-basis: 300px;

}
.lside b {
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: gray;
  padding: 5px;
  max-width: 100%;
}