Глеб!
Что‑то не так. В обоих ваших вариантах штука с граммами выглядит как переключалка пачек разной массы. Но если исходить из вашего описания, это просто текст, в котором масса текущей упаковки выделена зелёным. Кажется, для начала нужно определиться.
Если эта штука всё же является переключалкой, и вы уверены, что с точки зрения повышения продаж это лучший вариант, то тогда ваша проблема в некомпактной и неэкономной вёрстке. Просто сделайте компактнее:
Ещё можно попытаться показать разницу упаковок кеглем в переключалке:
Если же штука здесь только для информирования, то не до конца понятно, как это будет работать. Как понять, сколько всего будут стоить 10 килограммов? Что покупатель должен сделать с карточкой прямо сейчас, если хочет пачку побольше? Почему необходимо показать всё разом в одной карточке, а не поставить просто рядом три отдельных карточки для разного размера упаковок?
Три карточки рядом могли бы выглядеть так (цифры с потолка):
Обратите внимание, насколько компактнее стала карточка после того, как я убрал фоновую плашку. И при этом — о, диво! — карточки не стали склеиваться друг с другом, и мы легко понимаем, что к чему относится, благодаря соблюдению правила внутреннего и внешнего.
P. S. О том, как бороться с плашками и линейками, я много рассказываю и показываю на курсе «Типографика и вёрстка».
