<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Diff</title>
  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      position: relative;
      font-family: monospace;
    }
    .infos {
      width: 100%;
      max-width: 480px;
      margin: 40px auto;
      padding-left: 16px;
      border-left: 1px solid #8783ed;
    }
    
    .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 24px;
    }
    
    .info-item:last-child {
      margin-bottom: 0; 
    }

    .info-item__img {
      flex: 0 0 auto;
      width: 36px;
      height: 36px;
      margin-right: 10px;
    }
    
    .info-item__img img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
    }
    
    .info-item__dsc {
      flex: 1 1 auto;
      font-size: 16px;
    }

  </style>
</head>

<body>

  <div class="infos">
    <div class="info-item">
      <div class="info-item__img">
        <img src="https://cdn.icon-icons.com/icons2/2069/PNG/512/coin_dollar_finance_icon_125510.png" alt="">
      </div>
      <div class="info-item__dsc">
        <span>Some describtion goes here</span>
      </div>
    </div>
    <div class="info-item">
      <div class="info-item__img">
        <img src="https://cdn.icon-icons.com/icons2/2069/PNG/512/euro_coin_finance_icon_125512.png" alt="">
      </div>
      <div class="info-item__dsc">
        <span>Some describtion goes here</span>
      </div>
    </div>
    <div class="info-item">
      <div class="info-item__img">
        <img src="https://cdn.icon-icons.com/icons2/2069/PNG/512/pound_coin_finance_icon_125511.png" alt="">
      </div>
      <div class="info-item__dsc">
        <span>Some describtion goes here</span>
      </div>
    </div>
  </div>

</body>

</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.