Within my Bootstrap alert, I have a text and an undo button displayed. However, the button is not aligned correctly to the right, causing a misalignment with the close button on the right and the text on the left. I attempted to resolve this issue using this solution. Unfortunately, this resulted in the button being positioned under the text and the alert height matching the paragraph height. Below is the HTML code I utilized:
<div class="container">
{% with messages = get_flashed_messages(with_categories=true) %}
{% for category, message in messages %}
<div class="alert {{ category }}" style="vertical-align: middle;">
<button type="button" class="close" data-dismiss="alert">×</button>
<p class="pull-left d-inline">{{ message }}</p>
{% if category=='alert-success' %}
<form action="/undo" method="post" class="d-inline pull-right">
<input type="submit" value="UNDO" name="undo" class="btn btn-xs btn-danger pull-right">
</form>
{% endif %}
</div>
{% endfor %}
{% endwith %}
</div>
My implementation is based on Flask and Jinja syntax for alert management, with a form embedded in the alert for using Flask request handling to undo an action in a database.