JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Nährwerte: <span class="text-small text-light no-wrap">pro Portion</span></h3>
<div class="hidden"><span>1 medium slice</span></div>
<div class="row nutrition-list">
  <div class="nutrition-item col-xs-6 col-sm-3">
    <div class="amount icon-calories"><span class="display-block title">Kalorien</span> <span class="display-block"> <b class="data">165</b> <span class="unit">kcal</span> </span> <span class="display-block text-light-a nowrap">254 kcal / 100 g</span></div>
  </div>
  <div class="nutrition-item col-xs-6 col-sm-3">
    <div class="amount icon-carbohydratecontent"><span class="display-block title">Kohlenhydrate</span> <span class="display-block"> <b class="data">8</b> <span class="unit">g</span> </span> <span class="display-block text-light-a nowrap">12 g / 100 g</span></div>
  </div>
  <div class="nutrition-item col-xs-6 col-sm-3">
    <div class="amount icon-proteincontent"><span class="display-block title">Proteine</span> <span class="display-block"> <b class="data">0</b> <span class="unit">g</span> </span> <span class="display-block text-light-a nowrap">0 g / 100 g</span></div>
  </div>
  <div class="nutrition-item col-xs-6 col-sm-3">
    <div class="amount icon-fatcontent"><span class="display-block title">Fett</span> <span class="display-block"> <b class="data">15</b> <span class="unit">g</span> </span> <span class="display-block text-light-a nowrap">23 g / 100 g</span></div>
  </div>
</div>

CSS

.icon-calories:before {
  content: "\e003";
}

.icon-carbohydratecontent:before {
  content: "\e002";
}

.icon-proteincontent:before {
  content: "\e004";
}

.icon-fatcontent:before {
  content: "\70";
}

.nutrition-list .amount::before {
  font-size: 60px;
}

.nutrition-list .amount::before {
  position: absolute;
  font-size: 30px;
  top: 0;
  left: 0;
}

[class*=" icon-"]:before,
[class^=icon-]:before,
[data-icon]:before {
  font-family: gm-iconfont !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  speak: none;
}

.nutrition-list .amount {
  padding-left: 75px;
}

.nutrition-list .amount {
  line-height: 1.2;
  padding-left: 35px;
  position: relative;
  margin-bottom: 20px;
}

.col-sm-3 {
  width: 25%;
  float: left;
}

.col-sm-3,
.col-xs-6 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

.nutrition-list {
  margin-top: 20px;
}

.row {
  margin-left: -15px;
  margin-right: -15px;
}

.nutrition-list .title {
  font-weight: 300;
  color: #333;
  text-transform: uppercase;
}

.collapse.in,
.display-block {
  display: block;
}

.nutrition-list .amount .data {
  font-size: 25px;
}

.nutrition-list .amount .unit {
  font-size: 20px;
}

.text-light-a {
  font-weight: 300;
  color: #333;
}