Александр

Вынести в функцию "сбор" строки из текстового значения и чекбоксов (результат будет заменять значение в выходном инпуте), и забиндить ее на изменение всех контролов: как входного инпута, так и чекбоксов.

Если не хочется переделывать как выше советовали, то я бы еще рассмотрел вариант "по-старинке": ссылки через map на img, клики обрабатываются скриптом и подключают одну из заготовленных картинок с выделенной областью.

Плюсы:
1. Можно сделать произвольное выделение, хоть даже свечение на соседние области, это не повлияет на регионы, т.е. точно как сделал дизайнер.
2. Можно довесить различные css-переходы например.

Минусы:
1. Нужно сделать картинки по кол-ву областей, соответственно либо предзагрузку довешивать, либо крупный спрайт, в ПНГ в приведенном виде не должен быть сильно "тяжелым").
2. Не очень удобно поддерживать (например добавлять области).

Бо большому счету никак: только у пользователя отрендерить и жаваскриптом опросить. Даже если взять какой-то конкретный браузер, то могут быть разные шрифты установлены, разные размеры базового шрифта в настройках. Не говоря уже о «мелочах» вроде погрешности различных режимов сглаживания. Например в cleartype может «набежать» несколько лишних пикселей в строке, перенесется слово, и дальше уже высота блока сильно вырастет.

Немного не по теме, но я бы второму элементу опасити не менял. Просто скрытому больший z-index ставим, и его «появляем». Соответственно он закроет собой нижний. А так в промежуточном состоянии, когда у обоих по 50%, будет проглядывать фон на 25%.