JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<ul>
  <li>
    <div class="text">Pellentesque Porta Malesuada</div>
    <div class="icon-holder">
      <i class="fa fa-address-book" aria-hidden="true"></i>
    </div>
  </li>
  
  <li>
    <div class="text">Inceptos Tellus Parturient</div>
    <div class="icon-holder">
      <i class="fa fa-thermometer-empty" aria-hidden="true"></i>
    </div>
  </li>
  
  <li>
    <div class="text">Risus Bibendum Fusce Etiam</div>
    <div class="icon-holder">
      <i class="fa fa-bath" aria-hidden="true"></i>
    </div>
  </li>
</ul>

SCSS

body {
  padding: 10%;
}

ul {
  list-style-type: none;
}

li {
  display: flex;
  
  + li {
    margin-top: 10px;
  }

  .text {
    flex: 1;
  }
  
  .icon-holder {}
}