Как сделать так, чтобы один столбец в моей гибкой таблице занимал меньшую ширину, чем другие?

Question

Я пытаюсь создать таблицу HTML, используя DIVs и свойство flex CSS. Грубо говоря, все мои строки выглядят как

<div class='row'>
  <div class='col'>
    <div class='data-cell'>
      Col A
    </div>
  </div>
  <div class='col'>
    <div class='data-cell'>
      Col B
    </div>
  </div>
  <div class='col'>
    <div class='data-cell'>
      Col C
    </div>
  </div>
  <div class='col'>
    <div class='data-cell'>
      <div class='img-wrapper'>
        <img src='images/delete.png' title='Delete' />
      </div>
    </div>
  </div>

Ниже приведен CSS, который я использую

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  padding: 15px 0 15px 30px;
  border-bottom: 1px solid $lightGrey
}

.col {
  display: flex;
  flex-direction: col;
  flex-basis: 100%;
  flex: 1;
}

.header-row {
  color: $eclipse;
  font-weight: bold;
}

.img-wrapper {
  width: 100%;
  text-align: right;
}

. Прямо сейчас ячейки в каждой строке занимают 1/4 ширины строки. Что я хотел бы изменить, так это сделать так, чтобы col с изображением соответствовал только размеру изображения, а оставшиеся строки даже разделяли оставшееся пространство. Как мне это сделать, используя DIVs и flex?