не могу выровнять кнопку в группе кнопок вверху в MVC

Question

У меня большие трудности с перемещением текста в кнопке с левой стороны вверх (уровень риска 3). Это веб-приложение в MVC, и я использую группы кнопок в bootstrap. Я пробовал вертикальное выравнивание и верх: 0. но все же не повезло.

Я пробовал множество вещей при проверке элемента, но не повезло. Кажется, что тег span имеет полную ширину в двух других кнопках. но тег span в крайней левой кнопке выглядит только как ширина текста.

Код:

 @foreach (GRATT.DTO.ClinicalAreas ca in Model.ClinicalAreasList)
                    {
                        <div class="btn-group col-lg-4" role="group" aria-label="First group">
                            <div class="btn-toolbar" role="toolbar"  style="width:100%" aria-label="Toolbar with button groups">
                                <button type="button" id="btnClinical" class="btn btn-success btn-block" onclick="GetId(this)">
                                    <h4>Risk Level: @ca.ClinicaLevel</h4>
                                    <span>@ca.ClinicalDescription</span>
                                </button>
                            </div>
                        </div>

Answer 1

Существует несколько способов решения этой проблемы. Ниже приведено css решение flex-box , так как здесь есть селектор идентификатора для кнопки, я использовал его для стилизации кнопки.

#btnClinical {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}