[SOLVED] Content inside of flexbox container not displaying links inline

Content inside of flexbox container not displaying links inline

I'm fairly new to flexbox but can't seem to find an answer on here for this. I have a <p> tag which I've made into a flex container, and within the <p> I would like to insert a link inline with the text.

Required result:

However the result I'm getting is this:

The only way I can get the intended result is to change the display property of the <a> tag to 'contents', however a quick look on CanIUse show's that IE doesn't support it, and I need it to for this task.

I also don't want to restructure the HTML as this is to be rendered in a WYSIWYG, and simply adding classes to the <p> tag would be the best scenario.

I've made a pen of the issue here, with the scss version, and the compiled code is also posted below. Any help would be great.

.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>

Solution

Don't use display:flex here, because it will treat all the elements inside its container as 'blocks'.

.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';
    }
}