Fix regression: make media-body consume full available width

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](http://jsfiddle.net/3ck0qfhm/1/) vs [v3.3.1](http://jsfiddle.net/jj5snj84/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](http://csswizardry.com/2013/05/the-flag-object/) referenced from the original feature request issue, #14799.

------

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.