JSFiddle - React, Tailwind, and code Playground

by huston007

HTML

<div class='container'>

  <span>
    <div class='right'>
      
      <span class='hid'>Create</span>
    </div>
  </span>

  <span class='text-row'>Some text to be cropped 123</span>
</div>

SCSS

.container {
  width: 200px;
  height: 200px;
  border: solid 1px gray;
  
    overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.right {
  float: right;
}

.text-row {

}

.hid {
  display: none;
  .container:hover & {
    display: inline-block;
    margin-left: 8px;
  }
}