JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//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>

SCSS

$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;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #eee;
}
.LegendItem_Text {
  padding: 0 3px;
  flex: 1;
  align-self: flex-start;
  background: #eaa;
  line-height: $fontSize;
}