Cocorico

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

https://developers.google.com/web/fundamentals/des...

responsiveimages.org/demos

.subtitle:not(:last-child) применяется к этому диву, потому что кроме него есть и другие дочерние элементы и в данному случае псевдоклассы :not(:last-child) добавляют специфичности:
https://codepen.io/overveg/pen/qyQOKN

:not не добавляет специфичности, а :last-child - да

"The negation pseudo-class :not is not considered a pseudo-class in the specificity calculation. But selectors placed into the negation pseudo-class count as normal selectors when determining the count of selector types."
https://developer.mozilla.org/en-US/docs/Web/CSS/S...

Можно попробовать заменить :last-child на :nth-of-type

How To Create Equal Height Columns https://www.w3schools.com/howto/howto_css_equal_he...

Сделайте на флексах.

UPD.: Если в задании нельзя использовать флексы, тогда можно позиционировать элемент с помощью CSS селекторов :last-child и :nth-child(odd)

Прототип(решение с селекторами работает до ИЕ9 включительно): https://codepen.io/overveg/pen/bjKJVp

$("#button").val();

https://api.jquery.com/val/

Может вы имеете в виду pointer-events?