Restrict Width On Element To Width Of First Child

I have a pretty tricky situation here which I am trying to solve with CSS only. Basically, the idea is extremely simple, I have an .item div which holds an img and a p. The image c

Solution 1:

Solution #1 - The display:table method

1) Set display:table on the item

2) Give it a very small width say width: 1px

.item {
  display: table;
  width: 1px;
  background: tomato;
}

Updated JsBin

body {
  text-align: center;
}
.item {
  display: table;
  width: 1px;
  background: tomato;
}
.itemimg {
  display: block;
  /* removes spacing from inline-block (default) */width: auto;
  max-height: 320px;
  margin: 0 auto 0;
}

<divclass="item"><imgsrc="http://dummyimage.com/500x700/"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea impedit labore atque illo autem inventore totam, voluptatem tempore repudiandae.</p></div>

Solution #2 - Make use of intrinsic sizing (not IE compatible)

.item {
  width: -moz-min-content; 
  width: -webkit-min-content; 
  width: min-content;
  background: tomato;
}

.item {
  width: -moz-min-content;
  width: -webkit-min-content;
  width: min-content;
  background: tomato;
}
.itemimg {
  display: block;
  /* removes spacing from inline-block (default) */width: auto;
  max-height: 320px;
  margin: 0 auto 0;
}

<divclass="item"><imgsrc="http://dummyimage.com/500x700/"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea impedit labore atque illo autem inventore totam, voluptatem tempore repudiandae.</p></div>

1) Browser support is quite good (except for IE)

2) Here's an article explaining the min-content property