Отрегулируйте высоту кнопки начальной загрузки в зависимости от объема текста

Question

Как мне отрегулировать высоту моей кнопки на основе текста? Это отличается от других вопросов, задаваемых на основании того факта, что я использую классы BootStrap и не знаю, влияет ли это на результат.

Я бы подумал, что это было бы что-то похожее на это:

display: inline-block;
width: 50px;
height: 100px;
word-break: break-word;
overflow: hidden;

но ничего из вышеперечисленного не сработало. У кого-нибудь есть решение этой проблемы?

Вот мой HTML:

<div class="accordion collapsible-views" id="accordionExample">
  <div class="card">
    <div class="card-header" id={{collapseCard.headingId}}>
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" attr.data-target="#{{collapseCard.btnTargetId}}" aria-expanded="true" attr.aria-controls={{collapseCard.btnTargetId}}>
          {{collapseCard.btnTitle}}
        </button>
      </h5>
    </div>

А вот и мой CSS:

.btn {
        width: 100%;
        background: url(/assets/images/drop-down-icon.png) 100% no-repeat;
        text-align: left;
    }

    .card-header {
        border-bottom: 0px;
        border-radius: 10px;
        padding-left: 12px;
    }

    .card {
        border-radius: 10px;
        border: none;
    }

Высота кнопки должна быть отрегулирована