Контент внутри контейнера flexbox без встроенных ссылок

Question

Я довольно новичок в flexbox, но не могу найти здесь ответ на этот вопрос.У меня есть тег <p>, который я превратил в гибкий контейнер, и в <p> я хотел бы вставить ссылку в текст с текстом.

Требуемый результат:

Однако я получаю следующий результат:

Единственный способ получить ожидаемый результат - изменить свойство отображения тега <a> на «содержимое», однако быстрый взгляд на шоу CanIUse показывает, что IE его не поддерживает, иМне это нужно для этой задачи.

Я также не хочу реструктурировать HTML, так как он должен отображаться в WYSIWYG, и лучшим вариантом будет простое добавление классов в тег <p>.

I 'мы сделали ручку выпуска здесь , с версией scss, и скомпилированный код также размещен ниже.Любая помощь будет отличной.

.my-alert {
    width: 500px; 
    padding: 10px;
    border: 5px solid;
    font-weight: bold;
    display: flex;
    justify-content: start;
    align-items: center;
    font-weight: 900 !important;
}

.my-alert:before {
    font-family: 'Font Awesome 5 Free';
    font-size: 40px;
    display: flex;
    align-items: center;
    padding-right: 20px;
    font-weight: 900 !important;
}

.my-alert-success {
    color: green;
    border-color: green;
}

.my-alert-success:before {
  content: '\f058'
}

<p class="my-alert my-alert-success">Quam diu etiam furor iste tuus nos eludet? Excepteur sint obcaecat cupiditat non proident culpa.<a href="/">Here is my link.</a> And here is more content.</p>

Answer 1

Не используйте display:flex здесь, потому что он будет рассматривать все элементы внутри своего контейнера как 'блоки'.

.my-alert {
    width: 500px; 
    padding: 10px;
    border: 5px solid;
    font-weight: bold;
    /*display: flex; */
    padding-left:40px;
    justify-content: start;
    align-items: center;
    font-weight: 900 !important;
    float:left;
    position: relative;
    &:before {
        font-family: 'Font Awesome 5 Free';
        font-size: 40px;
        display: flex;
        align-items: center;
        padding-right: 20px;
        font-weight: 900 !important;
      position:absolute; 
      left:8px; 
      top:50%;
      transform:translateY(-50%);
    }
}

.my-alert-success {
    color: green;
    border-color: green;
    &:before {
        content: '\f058';
    }
}