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>