HTML не упаковывается должным образом

Я знаю, что это простой. У меня есть кнопка:

<a class = "btn btn-choice rectangle" (click) = "setQuestion(question, !question.active, $event)" [ngClass] = "{ 'active': question.active }"
  href = "#">
  <span class = "fa fa-square"></span>
  <span class = "fa fa-check-square"></span>
  <span class = "title">{{ question.description }}</span>
</a>

Классы fa скрыты в зависимости от состояния кнопки (я использую bootstrap btw). CSS для этого выглядит так:

.btn-choice {
    @include make-text-sizes($h1-sizes);
    font-weight: 300 !important;
    color: white !important;
    background-color: $midnight;
    display: block;
    margin-bottom: 30px;
    text-align: left;

    .header {
        padding: 0.375rem 0.75rem;
    }

    .title {
        padding-right: 40px;
        display: block;
    }

    .fa {
        float: right;
        display: none;
        margin-top: 7px; // Center vertically?
    }

    &:hover,
    &:focus {
        font-weight: 400 !important;
        background-color: $cyan;
        .fa-square {
            display: block;
        }
    }

    &:active,
    &.active {
        font-weight: 400 !important;
        background-color: $cyan;
        .fa-check-square {
            display: block;
        }
        .fa-square {
            display: none;
        }
    }
}

Теперь я пытаюсь сделать так, чтобы заголовок имел некоторый отступ, чтобы он никогда не перекрывал «квадратные флажки», но я не могу заставить его работать. Как видите, .title настроен как блок, и я установил некоторые отступы справа. Если я исследую свой элемент, я вижу, что этот контур находится внутри ссылки, но текст просто продолжается по ней.

Вот код проблемы:

https://codepen.io/r3plica/pen/LJZQqb