Я пытаюсь показать несколько атрибутов внутри одной складной гармошки более чистым способом, чем это: ![enter image description here](https://i.stack.imgur.com/4qDo6.png)
Вот код, стоящий за этим: ![enter image description here](https://i.stack.imgur.com/VZ6n5.png)
Однако, когда я пытаюсь реализовать столбцы, я получаю этот беспорядок: ![enter image description here](https://i.stack.imgur.com/oTUfw.png)
Это связанный код: ![enter image description here](https://i.stack.imgur.com/hgs2j.png)
Как мне оформить заголовок так, чтобы эти атрибуты были выровнены?
Вот пастбина последней попытки, поэтому вам будет проще редактировать: Pastebin code
https://pastebin.com/AkC7zJKW
Спасибо всем заранее!