JSFiddle - React, Tailwind, and code Playground

by lilnong1

HTML

<div style="width:100px;">
  <div class="box">
   <div class="status"></div>
   <div class="text">天津饭饭天津饭饭</div>
   <button class="btn">测试</button>
  </div>
</div>

CSS

.box{
  display: flex;
  align-items: center;
  resize: both;
  overflow: scroll;
}
.status{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  background-color: rgb(209, 48, 15);
}
.text{
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}
.btn{
  transform: scale(.6);
}