автоматическая высокая панель кузова с текстом

Привет у меня есть следующая проблема см. Изображение:
https://i.stack.imgur.com/1o1ld.jpg

Как я могу управлять этим, чтобы размер соответствовал тексту? код выглядит так:

<div class="panel panel-default">
<div class="panel-heading">
<strong>Anonym</strong>&nbsp
<a href="#"><span class="glyphicon glyphicon-ok-circle"></span></a>&nbsp
<!--<a href="#"><span class="glyphicon glyphicon-pencil"></span></a>&nbsp-->
<a href="#"><span class="glyphicon glyphicon-trash"></span></a>
</div>
<div class="panel-body">
<p><?php echo $Question;?></p>
</div><!-- /panel-body -->
</div><!-- /panel panel-default -->
<?php } ?>
<!--Hier neues Element Einfügen/Ende -->
</div><!-- /col-sm-6 -->
<div class="col-sm-6">

Спасибо за некоторые решения 🙂

CSS выглядит так:

.panel {
position:relative;
}
.panel>.panel-heading:after,.panel>.panel-heading:before{
position:absolute;
top:11px;left:-16px;
right:100%;
width:0;
height:0;
display:block;
content:" ";
border-color:transparent;
border-style:solid solid outset;
pointer-events:none;
}
.panel>.panel-heading:after{
border-width:7px;
border-right-color:#f7f7f7;
margin-top:1px;
margin-left:2px;
}
.panel>.panel-heading:before{
border-right-color:#ddd;
border-width:8px;
}