JSFiddle - React, Tailwind, and code Playground

by John Chacko

HTML

<div class="block-wrap">
  <div class="block">
    <div class="icon"></div>
    <div class="desc"> This is a very very very very very
    very very very very very
    very very very very very
    very very very very very
    very very very very very
    very very very very very
    long description</div>
  </div>
</div>

CSS

.block-wrap {
  display: inline-block;
  max-width: 100%;
}

.block {
  width: 100%;
}

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

.icon {
  float: right;
  margin-left: 10px;
  width: 20px;
  height: 14px;
  background-color: #333;
}