Inline nickname tweaks

Add margin so that they don't break lines when they appear by themselves
Replace float with flexbox

Inline images are a little odd, in that they take up the entire width of their container. Floating the close right worked for short lines, but for long lines, it would appear way off to the side.

Switching to flexbox allows us to reorder the image and the close button, and solves this issue
Merge pull request #15 from paradox460/master

Inline nickname tweaks
Merge pull request #16 from paradox460/fix-image-width-bug

Replace float with flexbox
Merge remote-tracking branch 'origin/master' into feature/with-emoticons