JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<div class="list">
  <div class="list__item">
    <div class="list__name">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A quia aut, nihil?</div>
    <div class="list__actions">
		X
    </div>
  </div>
	
	<div class="list__item">
    <div class="list__name">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    <div class="list__actions">
		X
    </div>
  </div>
	
	<div class="list__item">
    <div class="list__name">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A quia aut, nihil?</div>
    <div class="list__actions">
		X
    </div>
  </div>
</div>

SCSS

.list__item {
  display: flex;
  align-items: center;
	font-family: arial;
	border-bottom: 1px solid #dddddd;
	padding: .5rem;
	
	&:first-child {
		border-top: 1px solid #dddddd;
	}
}

.list__name {
  flex-grow: 2;
	padding-right: 2rem;
}

.list__actions {
  flex-shrink: 0;
}