JSFiddle - React, Tailwind, and code Playground

by nicholas_r

HTML

<div class="wrapper">
  <div class="icon"></div>
  <div class="label">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aut odit quia. Incidunt, porro, suscipit. Soluta provident reprehenderit saepe id hic, distinctio accusamus, amet quam neque perferendis laborum autem et.
  </div>
</div>
<div class="wrapper">
  <div class="icon"></div>
  <div class="label">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aut odit quia. Incidunt, porro, suscipit. Soluta provident reprehenderit saepe id hic, distinctio accusamus, amet quam neque perferendis laborum autem et.
  </div>
</div>
<div class="wrapper">
  <div class="icon"></div>
  <div class="label">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aut odit quia. Incidunt, porro, suscipit. Soluta provident reprehenderit saepe id hic, distinctio accusamus, amet quam neque perferendis laborum autem et.
  </div>
</div>

CSS

.wrapper{
  width: 80%;
  margin-bottom: 5px;
}

.icon, .label{
  float: left;
}

.wrapper:before, .wrapper:after{
  width: 100%;
  content: '';
  display: block;
}

.wrapper:after{
  clear: both;
}

.icon{
  width: 30px;
  height: 30px;
  background-color: #444;
}

.label{
  height: 30px;
  padding: 0 10px;
  overflow: hidden;
  line-height: 30px;
  white-space: nowrap;
  box-sizing: border-box;
  text-overflow: ellipsis;
  width: calc(100% - 30px);
  background-color: #e0e0e0;
}