Сергей Горячев

https://jsfiddle.net/webirus/3q16r9ut/

Просто задать для MAIN margin-left равный ширине красного блока.
Можно физически на CSS, а можно динамически на JS или jQuery, не важно.
Просто набросок https://jsfiddle.net/webirus/9vg3pud0/1/

Если на 1 инпуте, то Maskedinput для "перепрыгивания", а сам input просто оформить фоновой картинкой.
Желательно использовать моноширинный шрифт.
Но лучше разбить на 4 инпута https://jsfiddle.net/webirus/vhsq6jah/

overflow: auto;

https://jsfiddle.net/rpdwwqpa/
или тут хорошая подборка эффектов
https://tympanus.net/Development/CreativeLinkEffects/

Надо давать не код, а ссылку на песочницу.
https://jsfiddle.net/9uz9115g/
Все работает.
PS: Хреновая идея пихать туда тексты.

Не перекидывает.
У тебя наверно подгрузка скрипта затупила и вместо кружочка ссылка с # образовалась.
Или button не получил обработчика, в общем, что-то явно на твоей стороне.
Кэш попробуй убить. У меня нормально все.

Как сделать скролл как на ВК?
Там и моя реализация и примеры библиотек.

Никак не стал бы трахаться с отступом.
Позиционировал бы флексами блок с текстом и кнопкой по центру по вертикали и горизонтали.