JSFiddle - React, Tailwind, and code Playground

by abernov

HTML

<div class="el-form-item">
  <div class="label">label</div>
  <div class="item__content">
    <div class="item">here is some text to be ellipsis here is some text to be ellipsis here is some text to be ellipsis here is some text to be ellipsis </div>
  </div>
</div>

CSS

.el-form-item::after, .el-form-item::before {
    display: table;
    content: "";
}

.el-form-item::after {
    clear: both;
}

.label {
  width: 80px;
  float: left;
  background-color: yellow;
}
.item__content {
  display: block;
  position: relative;
}

.item {
  background: springgreen;
  width: 80%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display: inline-block;
}