Div to resize as per the span within the div - html

Question

I have a span inside a div tag as below
<div class="Panel">
<span class="spanClass">
This is a test </br> break added <br> second break
</span>
</div>
.Panel {
font-size: .7em;
color: Black;
font-family: Verdana, Arial, Sans-Serif;
margin: 5px 0px 5px 0px;
padding: 5px 50px 5px 50px;
border: solid 1px black;
background-color: yellow;
text-align: center;
vertical-align: middle;
height: auto;
text-align: left;
min-width:200px
width:auto;
}
.spanClass
{
background-color: red;
width:auto;
}
Demo : https://jsfiddle.net/2k0rq3q0/4/
I want the div to resize as per the text in the span and not take the width as of the parent. Is this possible?
I can set the max-width:200px; but I want it to resize as per text.
Also, If there is no text in span, is it possible to not display div? Right now and empty box is shown

Answer 1

Setting the .Panel to have a display:inline-block shrinks it down to the its contents. You still have padding that makes it a bit wider than the content, but you can remove that as well. Here's a fiddle.
.Panel {
font-size: .7em;
color: Black;
font-family: Verdana, Arial, Sans-Serif;
margin: 5px 0px 5px 0px;
//padding: 5px 50px 5px 50px; <- remove the padding if you truly want it flush
border: solid 1px black;
background-color: yellow;
text-align: center;
// vertical-align: middle; <- not needed, it's for inline elements and table cells
// height: auto; <- not really needed, unless it's inheriting a height elsewhere
text-align: left;
min-width:200px
// width:auto; <- not really needed, unless it's inheriting a width elsewhere
}

Answer 2

Please check below example. By just adding display: inline-block; will fix your issue
.Panel {
font-size: .7em;
color: Black;
font-family: Verdana, Arial, Sans-Serif;
margin: 5px 0px 5px 0px;
padding: 5px 50px 5px 50px;
border: solid 1px black;
background-color: yellow;
text-align: center;
vertical-align: middle;
height: auto;
text-align: left;
min-width:100px;
width:auto;
display: inline-block;
}
.spanClass
{
background-color: red;
width:auto;
}
<div class="Panel">
<span class="spanClass">
This is a test test test test test test test test test test </br> break added <br> second break
</span>
</div>

Answer 3

use override
<div class="Panel panel2">
<span class="spanClass ">
This is a test test test test test test test test test test </br> break added <br> second break
</span>
</div>
for css
.panel2{
font-size: 2em !important;
}

Answer 4

You can do this easily using script
$(document).ready(function(){
$('.Panel').width($('.spanClass').width());
});
fiddle here