Подскажите как грамотно сверстать блок

  .row { 
    display: flex; 
    width: 100%; 
    max-width: 400px; 
    position: relative; } 
    .row:after { 
      content: ''; 
      display: block; 
      width: 100%; 
      height: 1px; 
      left: 0; 
      bottom: 4px; 
      border-bottom: 1px dotted black; 
      position: absolute; 
      z-index: -1; } 
 
.td { 
  background: white; 
  padding: 0 5px; } 
 
  .td:nth-child(2) { 
    margin-left: auto; }

<div class="row"> 
  <div class="td">Сантехника</div> 
  <div class="td">300 гр</div> 
</div>

.info { 
  background: url("https://i.stack.imgur.com/9ZGVR.png") repeat-x left 68%; 
  padding: 0; 
} 
.info>span { 
  padding: 0 5px 0 0; 
  background: #fff; 
}

<table width="100%"> 
  <tr> 
    <td class=info> 
      <span>Мозги кита</span> 
    </td> 
    <td>3000 P</td> 
  </tr> 
</table>