1. display: table-cell подразумевает display: table у родителя
2. "a p" это какое-то извращение, почему бы просто не сделать a {display: block; margin: 0 10px; } ?
можно хранить id открытого спойлера в глобальной переменной или добавить спойлера класс и при открытии нового спойлера перебирать все спойлеры в поисках открытого
а в чем проблема то? первая строка 3 колонки, вторая одна https://wireframe.cc/pro/pp/e6299e9ab240887 в первую колонку первой строки вставляется еще 2 строки - 1 колонка и 2 колонки.
как вы со своим бэм *непечатное слово*... кроме того что он и так универсальный и стал по сути дефакто в плане оформления, при умении работать с SASS он позволяет очень быстро все кастомизировать.
если только текст и размер шрифта фиксируемый, то тупо прикинуть сколько такой блок примерно занимает в высоту использовать данное значение т.е. line-height: 10px; и других отступов по высоте нет, значит 20 строк = 20 х 10 = 200px
по поводу прокрутки - у блока который выводит контент на экран телефона задаются width/height + overflow-y/overflow-x.
поищи на гитхабе - попадались готовые решения.