Vuesax: Alert behaves weird if we add more elements

[jsinhSolanki]

I found weird behaviour of vs-alert if I add more span/div elements.
Because vs-alert have style display: flex; Other elements are also get this style. Which results in this behaviour.

<vs-alert color="primary" icon="new_releases" active="true" class="mb-1">

<span>you can change the position of the line up with the property line-position="top". You can also change the way the line appears on mouse hover with the property line-origin using the allowed values:</span>

<vx-list :list="['left', 'center(default)', 'right']"></vx-list> (this is my list component - there could be another span)

</vs-alert>

Best Solution:
I think best thing can be remove flex styles.
Add position absolute to icon so it stays on top no matter how large content is. (as you can see in pic)
and content should have some margin-left so content goes in straight flow.

• Your OS -> Windows 7
• Node.js version -> 8.12.0
• Vuesax version - 3.7.1
• Which package manager did you use for the install? -> npm

[basselAhmed]

@jsinhSolanki
Maybe create a single div inside vs-alert and inside that you create as many elements as you want and apply any styles you want to them?

[brunokunace]

@jsinhSolanki did you see the Bassel answer? Works for you?

[luisDanielRoviraContreras]

Ready already fixed in the latest version, thank you very much for the contribution, apologies for the delay