JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height: 150px; border: 1px solid red;box-sizing:border-box">
  <span class="fixIssue" style="display:flex; justify-content:flex-start;flex-wrap:nowrap;height:100px; border:1px dotted green;">
    <span style="flex:0 0 auto; margin-right:10px;">     
      <div class="imgDiv">
      	<img src="https://dummyimage.com/68x68/d612e8/" class="thumbnail" />
      </div>
  	</span>
    <span style="flex:0 1 auto; margin-right:10px; overflow: hidden">
      <span class="textSpanInner">
        <a href="" class="linkStyle">Big Name HereBig Name HereBig Name HereBig Name Here</a>
      </span>
    </span>
  </span>
</div>

CSS

.fixIssue {
  align-items: center;
}

.thumbnail {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
}

.imgDiv {
  border: 1px solid yellow;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.textSpanInner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}

.linkStyle {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}