JSFiddle - React, Tailwind, and code Playground

HTML

<section>
      <div class="snippet-wrapper">
      <div class="snippet">
        <div class="snippet-side">
          <div class="snippet-avatar">
          	
          </div>
        </div>
        <div class="snippet-main">
          
          
          <h4 class="snippet-title">
            <span>Константин Константинопольский</span>
          </h4>
          
        </div>
        </div>
      </div>
</section>
<section>
      <div class="snippet-wrapper">
      <div class="snippet">
        <div class="snippet-side">
          <div class="snippet-avatar">
          	
          </div>
        </div>
        <div class="snippet-main">
          
          
          <h4 class="snippet-title">
            <span>Костя</span>
          </h4>
          
        </div>
        </div>
      </div>
</section>

CSS

* {
  box-sizing: border-box;
}
section {
  background-color: rgba(200,240,190,0.3);
  padding: 2rem;
}
.snippet-wrapper {
  border: 1px solid rgba(0,0,0,.1);
  padding: 1rem;
  background-color: #fff;
  width: 300px;
}
.snippet {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
 }
.snippet-side {
    padding-right: 1rem;
 }
.snippet-main {
    width: 100%;
    margin-left: -6rem;
    padding-left: 6rem;
 }

.snippet-title {
    margin: 0;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
span {
    color: rgba(10,40,20,1);
    border-bottom: 1px solid rgba(10,40,20,.4);
}
  .snippet-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-size: cover;
    background-position: 50%;
    border: 1px solid #fff;
    background-image: url('//placecage.com/100/100');
    box-shadow: 0 0 0 1px rgba(0,0,0,.3);
  }