Softlink

Скорее всего надо идти от обратного: иметь два столбца, но нужные ячейки растягивать. Примерно так

Несколько вариантов.

Надо поменять местами input и span в разметке. Селектор + находит непосредственно следующий элемент.

Вполне ожидаемое поведение. Вы разметили таким образом, что у вас получилось по два одинаковых контейнера, которые имеют одинаковое положение на странице: "name const". И тут нет значения, что в html они расположены через один. Чтобы получить таблицу из этой разметки вам как раз не очень-то и нужен grid-template-areas, достаточно разметить положение колонок и строк. Вот так.

Нет. Инпут и таб должны иметь одного родителя, тогда сработает селектор ~.

Похоже на то, что у вас отображается правильный шрифт, только в другом Stylistic Set. Если подключали без вебпака ту же версию файла, то надо смотреть сборку, возможно где-то прописывается font-feature-settings.

Градиентом бы делал.

В fill после %23 вставляйте нужный цвет в hex.

Если такой вариант устраивает, то можно обойтись одной анимацией для иконок.

img {display: block;}

Для справки. Тег img по умолчанию инлайновый, поэтому на него действует в т.ч. вертикальное выравнивание в контейнере, которое тоже по умолчанию в большинстве браузеров baseline. Строго говоря, можно использовать и vertical-align: bottom или line-height: 0(и прочее обнуление) для удаления этого отступа, но вариант с display: block чаще всего практичней.

Ответ в комментарии

У вас ссылка в ссылке. Почитать про это можно, например, вот тут.