Created by: shesek
The addition of #14801 made media-body not consume the full available width, due to the use of display: table-cell. This is problematic when the media body has visible borders or elements floated to its right (see example - v3.2.0 vs v3.3.1).
This PR fixes this by applying width: 100% to media-body and display: table to the main media element, as was done in the flag object article referenced from the original feature request issue, #14799 (closed).
My 2c: I don't think that applying table displays to all media elements is a good idea. Using table/table-cell makes elements behave quite differently and may cause things to break in odd ways.
While my suggested change might fix this issue, I'm not sure that it doesn't cause others. I would much rater have vertical alignment and table display as an opt-it, either by specifying an additional class on the media element ("media-valign"?) or by making it a completely different component ("flag"?), rather than changing the behavior of an existing component and possibly breaking existing code.
If you prefer, I can send a pull request that does that instead.