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?
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.