JSFiddle - React, Tailwind, and code Playground

CSS tricks

by abernov

HTML

<div class="el-form-item">
  <div class="label">label</div>
  <div class="separator">sep</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 {
  background-color: red; 
  display: inline-block;
}

.separator {
  width: 40px;
  background-color: black;
  color:white;
  cursor: 'ew-resize';
  float: left;
}

.label {
  width: 20%;
  float: left;
  background-color: yellow;
}

.item__content {
  width: 80%;
}

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