how to align 2+ 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  elements work inline as part of a .

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

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

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

The spans are nested in separate `
` tags, so shouldn't the paragraphs be inline? — Paul, Aug 15 '18 at 13:42
not quite following you. there is only one `
` and (now) 2 ``s nested in the single `
`. Without `mustache` they work inline as expected. With `mustache` the second is forced to a new line. I'm trying to eliminate whatever is forcing the second to the new line. — Jay Gray, Aug 15 '18 at 13:47
Mustache seems to add extra tags, just take a look at the HTML structure of the page you linked: https://prnt.sc/kixfho — Paul, Aug 15 '18 at 13:52
ah so! thanks - did not know that. based on that fact, can you propose inline CSS that would modify the hidden CSS to allow inline ? — Jay Gray, Aug 15 '18 at 13:55
or do I need to take a different approach based on the injected `mustache` CSS? — Jay Gray, Aug 15 '18 at 13:56
I don't know much about mustache, but `p, .keep-together { display: inline; }` seems to do the trick if you remove the float property. — Paul, Aug 15 '18 at 13:58
here's a version with your change: https://ampb.in/#rAuIKzxzaygw9S1k1H8y — Jay Gray, Aug 15 '18 at 14:02
Nope, you missed the `p,` part of my code above. Your paragraph tags are still `display: block`. — Paul, Aug 15 '18 at 14:03

score 1 · Accepted Answer · answered Aug 15 '18 at 14:10

1

Mustache is adding enclosing  tags to each of your  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.

answered Aug 15 '18 at 14:10

Paul

I have a related question that I'd like to direct to you in a new Stack post. Are you online so I can call it to your attention? – Jay Gray Aug 22 '18 at 13:30
Just post your question, there are tons of people out there who might have better answers than I do. If you posted the question, you can still link it here as a comment, and I will get notified. – Paul Aug 22 '18 at 14:55

1 Answers1