CSS -div expands for multi line text vs single line text - html

Question

I'm trying to show a text in a border div located in absolute location inside another div.
Option 1 with width:auto; - fiddle: https://jsfiddle.net/c21kt6r4/
The problem is that the left side box expands too much.
Option 2 - with width:min-content; fiddle: https://jsfiddle.net/ay159rw6/2/
The problem is that the right side box text wraps.
What is the clean way to wrap text in div and show a correct border in both multi and single line texts?
For reference the html is :
<div class="main">
<div class="item" style="left:0;">
<label>SHAMPOO & CONDITIONER</label>
</div>
<div class="item" style="left:165px;">
<label>WHAT EVER</label>
</div>
</div>
And CSS:
.main{
position:relative;
border:solid black 1px;
width:400px;
height:400px;
}
.item{
border:solid blue 1px;
width:160px;
height:150px;
position: absolute;
}
.item label{
position:absolute;
bottom:5%;
left:5%;
border:solid red 1px;
padding:5px;
display:inline-block;
font-size:12px;
width:min-content;
}

Answer 1

Follow these steps.
1) You need to warp the label inside a div and then give it position:absolute. Also you need to use right:5% to give spacing on both lefr-right sides. We're wrapping into a div because we want position relative to div we're applying table cell property.
2) You need to display: table-cell; your label tag .item label
3) Give word-break: break-all; your label tag .item label so word can take whole space
Here is the working demo: https://jsfiddle.net/o5dgzn0c/
Demo image.
Hope it will help!

Answer 2

I would suggest you going with max-width here, because it will limit max width of the item element to some value and keep possibility to include width:auto feature width for all elements less than it, something like:
.item label{
position:absolute;
bottom:5%;
left:5%;
border:solid red 1px;
padding:5px;
display:inline-block;
font-size:12px;
width:auto;
max-width:100px;
}
However, I would go with JS approach on this, as you have no idea what text might appear.