IE element width to min-content
As mentioned by someone else you can use -ms-grid-columns. You just add a div around your content with IE only CSS. To other browsers the CSS is ignored and shouldn't affect your layout (unless you're applying CSS to all div elements like padding/margin in which case stop doing that).
HTML
<div id="stupidIE">
<div class="container">
<img id="image" src="http://dummyimage.com/200" alt="">
<span class="text">
Cupcake ipsum dolor sit.
Amet chocolate carrot cake oat cake bear claw croissant.
</span>
</div>
</div>
CSS
.container
{
background-color: #EEEEEE;
border: 1px solid #888888;
padding: 0.3em;
width: -moz-min-content;
width: -webkit-min-content;
}
#stupidIE
{
display: -ms-grid;
-ms-grid-columns: min-content;
}
Here's the JSFiddle: http://jsfiddle.net/LRYSp/
Tested in Chrome and IE11. But it should work in other browsers. However I don't think it will render correctly in IE9 and below.
@Stack_of_Pancakes solution is lacking in that it adds an extra div which is a block element and spans the entire width, whereas the original width:min-content doesn't have this flaw. It can be fixed:
HTML: (intact)
<div class="container">
<img id="image" src="http://dummyimage.com/200" alt="">
<span class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</span>
</div>
CSS:
.container {
background-color: #EEEEEE;
border: 1px solid #888888;
padding: 0.3em;
width: -moz-min-content;
width: -webkit-min-content;
display: -ms-inline-grid;
-ms-grid-columns: min-content;
}
.container > span:nth-child(2)
{
-ms-grid-row:2;
display:inline-block;
}
http://jsfiddle.net/L28s7txr/6