csssassflexbox

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:

Required result

However the result I'm getting is this:

Current result

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