Getting status.lol .js embed entirely inline?

[bixfrankonis]

So the HTML output of the status.lol .js embed is

<div class="statuslol_container">
	<div class="statuslol" style="">
		<div class="statuslol_emoji_container">[emoji]</div>
		<div class="statuslol_content">
			<p>[status]</p>
		</div>
	</div>
</div>

I cannot for the life of me figure out how to get the emoji and the status to exist all on one line. I've tried various combinations of display: inline and/or display: inline-block on the statuslol_emoji_container and the statuslol_content and the p, all to no avail.

What am I missing? Or is there something that's just going to prevent this from working?

[newbold]

It’s because of the Markdown parsing, which will usually add a <p> at minimum, but could also add other markup depending on whatever is in the source status entry. But assuming that an extra <p> or two is all you need to deal with, you can do this:

https://codepen.io/newbold/pen/mdjaBPd

Hope this helps! I think I could also add some options that could provide the raw source statuslog entry (not parsed for Markdown) as well as inline output if desired.

[bixfrankonis]

Okay I must have something else in my CSS that's causing interference because inlining everything keeps not working for me. (I did think about suggesting another parameter like ?simple or something, but I was trying to not ask for another thing.)

[bixfrankonis]

I found my error. I had an inline-block on the <p> tag in order to get text-align: justify to work, and that threw everything off I guess. So I have to pick between the emoji inline or justified text.

[newbold]

I do like the ?simple idea though, and will add that when I can!