<div class="container">
  <div class="item infoRow">
    <div class='infoRow-Item infoRow-likedName font-bold'>John Snow</div>
    <div class='infoRow-Item, font-gray'>likes this</div>
    <div class="infoRow-Item infoRow-dotsMenu">...</div>
  </div>
  <div class="item">
    <div class='profileInfo'>
      <div class='profileInfo-image'></div>
      <div class='profileInfo-text'>
        <div>
          <span>Profile Name</span>
          <span class='profileInfo-nth font-gray'>2nd</span>
        </div>
        <div>
          <span class='font-gray'>Long and inaccurate work title that you think will matter and intrest some
            headhunter</span>
        </div>
        <div>
          <span class='font-gray'>1w Edited</span>
        </div>
      </div>
    </div>
    <div class='profileInfo-textSection'>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit perferendis et cupiditate sit?</p>
      <p>Ipsam vitae modi voluptatum suscipit aliquid a nisi, quibusdam reiciendis unde quidem praesentium iure
        doloribus </p>
      <p>dicta voluptates.<span class='profileInfo-more font-gray'>...see more</span></p>

    </div>
    <div class='translationSection'>
      <span class='translationSection-translation font-bold'>See translation</span>
      <span>
        <span class='translationSection-likeIcon' />
        <span class='translationSection-heartIcon' />
        <span class='translationSection-clapIcon' />
        <span class='translationSection-likeCount'>115</span>
        <span>0 comments</span>
      </span>
    </div>
  </div>
  <div class="item">
    <div class='userActionSection'>
      <span class='userActionSection-icons userActionSection-like font-bold font-gray'>Like</span>
      <span class='userActionSection-icons userActionSection-comment font-bold font-gray'>Comment</span>
      <span class='userActionSection-icons userActionSection-share font-bold font-gray'>Share</span>
    </div>
  </div>
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #eee;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto,
    Helvetica Neue, Fira Sans, Ubuntu, Oxygen, Oxygen Sans, Cantarell,
    Droid Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
    Lucida Grande, Helvetica, Arial, sans-serif;
}

.container {
  background-color: white;
  width: 460px;
  margin: 10px auto;
  display: flex;
  flex-direction: column;
  border: 1px solid #d3d3d3;
}

.item {
  padding: 10px 20px;
  position: relative;
}

.item:first-of-type {
  border-bottom: 1px solid #d3d3d3;
}

.infoRow {
  display: flex;
  align-items: baseline;
}

.infoRow-likedName {
  margin: 0 4px;
}

.infoRow-dotsMenu {
  display: block;
  line-height: 0rem;
  font-size: 2rem;
  align-self: start;
  margin-left: auto;
}

.profileInfo {
  display: flex;
}

.profileInfo-image {
  flex: 0 1 60px;
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 60px;
  background-color: pink;
}

.profileInfo-text {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  margin: 0 0 20px 10px;
}

.profileInfo-nth:before {
  content: " • ";
}

.profileInfo-textSection > p {
  margin-bottom: 1rem;
}

.profileInfo-more {
  display: inline;
}

.profileInfo-more:before {
  content: "\00a0";
  margin-left: 0.2rem;
}

.translationSection {
  display: flex;
  flex-direction: column;
}

.translationSection-translation {
  margin: 0.5rem 0;
  color: #006097;
}

.userActionSection:before {
  content: "";
  position: absolute;
  left: 20px;
  top: 2px;
  height: 1px;
  width: 410px;
  border-bottom: 1px solid #d3d3d3;
}

.translationSection-likeIcon:before {
  content: " 👍 ";
}

.translationSection-heartIcon:before {
  content: " ❤️ ";
}

.translationSection-clapIcon:before {
  content: " 👏 ";
}

.translationSection-likeCount:after {
  content: " • ";
}

.userActionSection-icons {
  margin-right: 0.5rem;
}

.userActionSection-like:before {
  content: " 👍 ";
}

.userActionSection-comment:before {
  content: " 💬 ";
}

.userActionSection-share:before {
  content: " ↗️ ";
}

.font-bold {
  font-weight: bold;
}

.font-gray {
  color: #777;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.