Антон Спирин

Посмотрите как это реализовано в правильных инструментах.

1. В таблице должна быть возможность выделить ячейки.
2. По клику на кнопку объединить, удаляете выделенные, заменяя одной большой. Можно даже контент сохранить.
А так как вы хотите реализовать, во-первых неудобно пользователю, во-вторых усложняет реализацию.

Примерно так https://jsfiddle.net/rockon404/9amjs0xr/

Можно https://jsfiddle.net/rockon404/b3rfa00m/
Но не с dropbox. Если интересно почему, перейдите по своей ссылке и посмотрите исходный код. Они под каждый переход новую ссылку на просмотр генерируют.

Вы наверное слайдер делаете. Можно так https://jsfiddle.net/rockon404/qw6ty8rs/

const form = $('.my-form');
const button = $('.button-attach');

button.click(form.submit);

Можно так: https://jsfiddle.net/rockon404/5dt5xh6t/

Простейший вариант https://jsfiddle.net/hk6wscLt/

Для обычных цветов, принято использовать HEX значения:
color: #607D8B;

Для цветов с прозрачностью принято использовать RGBA:
color: rgba(0, 0, 0, 0.5);

Для полностью прозрачного принято использовать переменную transparent:
color: transparent;

Остальные html переменные цветов использовать можно, но зачем? В большинстве случаев HEX запись короче. Да и дизайнеры редко используют стандартные цвета.

Программы пипетки:
для Windows Just Color Picker или один из кучи аналогов,
для Linux GPick или один из аналогов,
на MacOS пока была без надобности, гуглите.

Используйте SCSS исходники. Их можно легко настроить и подключить только нужное.

Уберите width: auto;
https://jsfiddle.net/urbt4L1u/

Потому что правило display для вашего компонента задается селектором css, а не является ключом собственного свойства style.

Так будет работать:

var leftMenu = document.querySelector(".left-menu");
var displayValue = window.getComputedStyle(leftMenu,null).getPropertyValue("display");
console.log(displayValue === 'none');

На странице два элемента с одним id. Ваш скрипт забирает и слушает первый, а пользователь взаимодействует со вторым, который ваш скрипт не слушает. Видимо, особенности работы вендерной библиотеки. Добавьте класс, например f1 и забирайте по нему, а значение получайте из e.currentTarget:

$('.f1').on('change', function(e) => {
 var value = $(e.currentTarget).val();
})

Вот этот код, выполненный в консоли браузера на вашем сайте, прекрасно работает:

$(document).find('.form-element').on('change', e => console.log($(e.currentTarget).val()));

Вот простой вариант решения https://jsfiddle.net/rockon404/q2kpasfu/

Да никакой. Тут дело в размере. Вы можете сделать свою сборку bootstrap из scss исходников, исключив все что не собираетесь использовать. На скорость загрузки влияние минимальное.

Используйте элементы fieldset и legend
Пример https://jsfiddle.net/7bu94x90/
Для позиционирования legend относительно левого края используйте margin-left
Вообще fieldset задумывался для разделения форм на блоки, но вы вольны использовать его везде где можно использовать блочные элементы. Html будет валидным.

Вот упрощенный вариант решения без float https://jsfiddle.net/3b0gtfwg/
А отступ у вас не работает потому, что используете строчный span, float не причем.
Почитайте о разнице между строчными и блочными элементами.

Зачем вам делать чарт с нуля когда есть куча готовых настраиваемых решений?