I have three divs vertically aligned side by side. The first div has a max width but for some reason that div is larger than the content. It is the width set for max-width. I would like names to wrap in a way that fits in the max-width and then for the div to shrink to whatever the width the children dictate.
The content is generated dynamically so I do not want to set widths for any div. The only thing I want to set is the max-width of the wrapper of all the names.
It currently looks like the example in the top image - I would like it to look like the example in the bottom:
Here is an example in Code Pen: http://codepen.io/anon/pen/dYPRLX
<div id="exhibition_title_wrapper">
<div id="exhibition_title_name">
<div class="artist_name">Steve Greenberg</div>,
<div class="artist_name">Sarah Thompson</div>,
<div class="artist_name">Bill Bradbury</div>,
<div class="artist_name">Tom Rogers</div>,
<div class="artist_name">Nicole Haight</div>
<div class="artist_name">Barney Franklin</div>,
<div class="artist_name">Todd Franklin</div>
</div>
<div id="slash"><img src="http://s9.postimg.org/r1gx8okp7/slash.png"></div>
<div id="exhibition_title_right">
<div id="exhibition_title_title">Expo 3000</div>
<div id="exhibition_title_date">September 1-20, 2017</div>
</div>
</div>
and this is my CSS
#exhibition_title_wrapper {display:block;}
#exhibition_title_name {display: table-cell;
vertical-align: middle; max-width:300px;}
.artist_name {display: inline-block;}
#slash {display: table-cell; vertical-align: middle; padding: 0 10px;}
#exhibition_title_right {display: table-cell; vertical-align: middle;}
#exhibition_title_title {display:}
#exhibition_title_date {display:}
Can anyone please guide me in the right direction?
