JSFiddle - React, Tailwind, and code Playground

by henesnarfel

HTML

<div class="comment-box">
  <a class="comment-owner-link">imghere</a>
  <div class="comment">comment info goes heresafasfsafsadfaskjflkwjefoijeijwijefgoiewjfiowejfiojweiogfj jasdfjoas jfaiosjf asjf asfoi ajsfdio jasofjsaoidfj oiasjf asjf oiasjfioasjd oifjasoif asoifoi sas fds </div>
</div>

CSS

.comment-box {
  display: block;
  margin: 8px 8px 0 8px;
  white-space: nowrap;
    background: blue;
}

.comment-owner-link {
  display: inline-block;
  vertical-align: top;
  position: relative;
  width: 27px;
  height: 27px;
    background: red;
}

.comment-owner-link img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.comment {
  display: inline-block;
  vertical-align: top;
  margin: 0 0 0 5px;
  word-break: break-all;
  white-space: normal;
    background: yellow;
}