Верстка гибкой "таблицы" с выравниванием кнопок в последнем столбце по левому краю

Question

задача: сверстать дизайн подобного вида

в строке располагается иконка, затем текст переменной длины и кнопка. в разных строках кнопки различной ширины и их нужно выровнять по левому краю, оставив при этом максимальную ширину блока для текста

что делал: не желая размещать таблицу, пробовал разное (flex, flex-grow, float и т.п.), но не пришел к ожидаемому результату. пробовал найти подобную задачу в интернете, но все не то, сложно сформировать правильный запрос. с виду все просто, но я еще только учусь

песочница: код без выравнивания кнопок

вопросы: нужен гибкий вариант подобного решения, форма с данным элементом будет изменяться по ширине. возможна ли красивая реализация БЕЗ ТАБЛИЦЫ? просьба направить на верный путь: куда смотреть, что пробовать, чтобы получить такой результат

Answer 1

Попробуйте сделать вот так.

<table>
  <tr>
    <td>
      <span>Icon</span>
      <span>Text</span>
    </td>
    <td>
      <button>First Button</button>
    </td>
  </tr>
  <tr>
    <td>
      <span>Icon</span>
      <span>Text Text</span>
    </td>
    <td>
      <button>Second Button 2</button>
    </td>
  </tr>
  <tr>
    <td>
      <span>Icon</span>
      <span>Text Text Text</span>
    </td>
    <td>
      <button>Third Button 3</button>
    </td>
  </tr>
</table>

Также если надо сделать максимальную длину блока с текстом можно сделать так:

td:first-child {
  width: 100%;
}
button {
  text-wrap: nowrap;
}

Answer 2

Можете попробовать применить grid

.row {display: grid; grid-template-columns: 5rem 1fr 1fr; justify-items: start;}

<div class="wrapper">
  <div class="row">
    <span>Icon</span>
    <span>Text</span>
    <button>First Button</button>
  </div>
    <div class="row">
    <span>Icon</span>
    <span>Text Text</span>
    <button>Second Button 2</button>
  </div>
  <div class="row">
    <span>Icon</span>
    <span>Text Text Text</span>
    <button>Third Button 3</button>
  </div>
</div>

БЛОГ НА HUSL

Верстка гибкой "таблицы" с выравниванием кнопок в последнем столбце по левому краю

Ответы (2 шт):