Как удачнее реализовать «резиновый» input при изменении value через код?

Question

[Destell]

Пример

Левая часть содержит различные опции, правая - форма, в которую заносятся значения выбранных опций, далее это все будет отправляться.
Все бы ничего, но возникла проблема с эстетической частью - инпаты не подстраиваются под длину текста, заданного через val().

В голову пришли два решения:

1) Использовать аналог стандартного решения для создания резиновых input (с занесением текста в блок, получением его ширины и передачи ее в свойства input), только по click/change при выборе опции

2) Передаю значения в обычные блоки, они же дублируются в скрытые input'ы, расположенные после этих блоков
Примерно так. Target - div, в который изначально заносятся значения.

setResultInInput: function (target, value) {
                var _resultInput = $('[data-result]'),
                    _next = target.next(_resultInput);

                if (_next.length) {
                    _next.val(value)
                        .attr('value', value);
                }
            },

Я реализовал второе (на codepen не прописано), вопрос в том, есть ли более удачное?