JSFiddle - React, Tailwind, and code Playground

by Dmitry Podlesny

HTML

<div class="block-wrap">
  <div class="block">
    <div class="icon"></div>
    <div class="text">Text text text text text text text text text text text text text text text text text text text</div>
  </div>
</div>

CSS

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

.block {
  width: 100%;
}

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

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