using multiple lines in p-message(s) breaks layout

[Arikael]

[x ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
if you use line breaks or just a text which breaks automatically the whole text gets pushed below the icon.

Expected behavior
I think the correct/better behavior would be to either let the text float around the icon or keep it intended.

What is the motivation / use case for changing the behavior?
the layout is off when using multiple lines.
In our case we needed a warning to explain to user what will happen if he proceeds.
This can't be done in one line.

Please tell us about your environment:

• Angular version: 5.X
  5.2.10

• PrimeNG version: 5.X
  5.2.3

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  Chrome 66.0.3359.117
  Firefox 59.0.2
  not tested with other browsers

[Arikael]

also the margin-left causes to first line to be correctly intended, while all others are not.
adding display:inline-block to .ui-messages-detail fixes that issue.

There is no activity for 21. days on this issue?
Has it been seen?

[adama357]

My temp fix for this is to set [style]="{'display':'flex'}" on the p-messages, and then set ui-messages-icon to have a right margin.

Edit: In order to make it look right when the text is short, I added:
.ui-messages ul {
display: flex;
align-items: center;
}