Помогите сконструировать правильно страницу
Хочу сделать такое:
левый столбик - заполнен цветом градиентом а значения от 0 до 100
правый столбик - до 10 уровней выделения, изначально равен высоте левого столбика, если потянуть за границу - должен появиться второй уровень, третий и т.д. до 10, высота уровней может быть разной, но в сумме по высоте они должны быть равны левому. Минимальная высота 5% от высоты левого столбика
Приготовил такой скелет HTML:
jsfiddle.net
Кнопка адд - добавляет, делете - удаляет последний, клеар - удаляет все кроме первого, сет дефаулт - устанавливает по умолчанию 10 уровней, пытаюсь сделать чтоб ширина дива менялась от их количества - может посоветуете какой алгоритм а?