JSFiddle - React, Tailwind, and code Playground

by Jithin Raj P R

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class='Container'>
    <div class="LegendItem">
        <div class="LegendItem_Eye"><i class="fa fa-eye"></i></div>
        <div class="LegendItem_Text">Short Text</div>
    </div>
    <div class="LegendItem">
        <div class="LegendItem_Eye"><i class="fa fa-eye"></i></div>
        <div class="LegendItem_Text">Short Text</div>
    </div>
    <div class="LegendItem">
        <div class="LegendItem_Eye"><i class="fa fa-eye"></i></div>
        <div class="LegendItem_Text">Short Text</div>
    </div>
    <div class="LegendItem">
        <div class="LegendItem_Eye"><i class="fa fa-eye"></i></div>
        <div class="LegendItem_Text">Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text </div>
    </div>
</div>

CSS

$fontSize: 18px;
$itemHeight: $fontSize * 1.3;
$slotWidth: $itemHeight;
.Container {
    padding: 10px;
    width: 300px;
    border: 1px solid #eee;
}
.LegendItem {
  min-height: $itemHeight;
  font-size: $fontSize;
  margin: 2px 0;

  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;
}

.LegendItem_Eye {
  width: $slotWidth;
  background: #eee;
 /* display: flex; Removed*/ 
 /* justify-content: center; Removed*/ 
 /* align-items: center; Removed*/ 
  background: #eee;
}
.LegendItem_Text {
  padding: 0 3px;
  flex: 1;
  align-self: center;
  background: #eaa;
}