how to align 2+ <span> on single line

Question

Am using mustache to populate data on an AMP HTML page.

Here is the target HTML on Google's ampb.in: https://ampb.in/#z4sIphWxKIOfZtfqWTpm

The buttons open a related structure, but are null here for simplicity.

How to make the second and subsequent <span> elements work inline as part of a <p>.

Have tried .keep-together {display: inline-block; float: left} but that does not work.

If I remove the mustache template the <span> and <button> work as expected.

Since the application depends on using mustache, how to make the inline elements work as they do without mustache?

Answer 1

Mustache is adding enclosing <p role="listitem"> tags to each of your <span class="keep-together"> elements. By adding

p, .keep-together { display: inline; }

all text with buttons will show as one inline element.

Disclaimer: I do not know much about mustache, there might be an option to prevent the additional tags. This is merely a CSS work-around.