@smotornyuk here's the change with an accordion added that I think is an general improvement. I've added the type information to the header so it's visible even when not expanded. WDYT? (and am I using columns wrong for this? adding a class="row" around them breaks completely)

Looks good. As for col* outside a row, strictly speaking, it's a violation. But, unless you want to write explicit styles or add a dozen extra classes to balance the position of elements, I'd leave col here.

By itself, col* class will not work and you should not rely on it outside of row. But this time it's working because your col* elements are direct descendants of accordion-button element, which shares some properties of row.
To put it simple, col* will work as direct descendant of any element with display:flex (accordion-button has this property). So whenever you are using col*, you can add d-flex class to its parent to make it work.

It's better not to rely on this behavior, because it's specific for Bootstrap v4 and v5 an may change in future. But we are going to update styles anyway, so we can tolerate this inconvenience.

The only thing that requires changes is -sm- part of the class. Use just col-*, i.e col-1 instead of col-sm-1 and the same for any -sm- part. -sm- classes are applied only to screens wider than 570px, so accordions may look worse on mobile. col- + number, without intermediate parts, is applied to any width so you'll have approximately the same appearance on any screen.

Thank you @smotornyuk . Here's a fix that updates those column classes and the accordion functionality from fields that have no data dictionary labels/descriptions/extra information.

Here the second field has no title/description/extra so it can't be clicked and has no arrow on the right: