JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="listing">
  <div class="listing__item">
    <div class="listing__item__handle">
      |
    </div>
    <div class="listing__item__switch">
      X
    </div>
    <div class="listing__item__icon">
      X
    </div>
     <div class="listing__item__text">
   text
    </div>
    <div class="listing__item__points">
      points
    </div>
    <div class="listing__item__actions">
      actions
    </div>
  </div>
</div>

SCSS

.listing {
  /* background:Red; */
 
  &__item {
     display: flex;
     border-bottom: 1px solid lightgrey;
     
     &:hover {
       cursor: move;
     }
     
       &__handle ,
     &__icon ,
     &__switch ,
     &__text ,
      &__points,
      &__actions {
     padding: 0.33rem;
     }
     
     &__handle {
       flex: 0;
       
     }
     &__icon {flex: 0;
       
     }
     &__switch {flex: 0;
       
     }
     &__text {flex: 1;
       
     }
      &__points {flex: 0;
       
     }
      &__actions {
       flex: 0;
     }
  }
}