JSFiddle - React, Tailwind, and code Playground

by piiantom

HTML

<div class="first">
  <ul class="upper">
    <li class="clearfix">
      <span class="amount">2</span>
      <span class="name">lorem</span>
    </li>
    <li class="clearfix">
      <span class="amount">100 ml</span>
      <span class="name">ipsum dolor sit</span>
    </li>
    <li class="clearfix">
      <span class="amount">1 tbsp</span>
      <span class="name">amet consectetur adipiscing</span>
    </li>
    <li class="clearfix">
      <span class="amount">100 g</span>
      <span class="name">elit sed do eiusmod tempor incididunt</span>
    </li>
    <li class="clearfix">
      <span class="amount">&frac12; tsp tsp</span>
      <span class="name">ut labore</span>
    </li>
    <li class="clearfix">
      <span class="amount">3 tbsp tbsp tbsp</span>
      <span class="name">et dolore magna aliqua</span>
    </li>
  </ul>
</div>

CSS

/* first */
 

 ul {
   list-style: none;
   padding: 0;
   display: inline-table;
 }
 
 li {
   margin: 8px 0;
   display: table-row;
 }
 span{display: table-cell;}
 span.amount {
   padding-right: 16px;
   text-align: right;
   color: #999999
 }
 
 span.name {
   width: calc(60% - 16px);
 }
 
 .first {
   background-color: #dee4ec;
 }