JSFiddle - React, Tailwind, and code Playground

by djp3d

HTML

<div id="message" style="z-index: 999;position: fixed;top: 100;left: 0;width: 100%;">
    <div style="padding: 5px;">
        <div id="inner-message" class="alert alert-warning" style="display:flex;" role="alert">
            <div>
                        <h4 class="alert-heading"><i class="fa fa-exclamation-triangle"></i> Warning!</h4>
            <p>Your membership will expire soon. Please renew your membership to keep you account live and retain your place on the leaderboard.</p>
            </div>

            <a style=" display: inline-block; text-align: right; align-self: center;" class="alert-link btn base-btn-bg base-btn-text base-btn-borders" href="/en/members-area/purchase-membership/">RENEW NOW.</a>
        </div>
    </div>
</div>

CSS

.panel-footer {
    height: 70px;
    border: solid;
    display:flex;
}

.header-footer-item {
    display: inline-block;
    border: solid red;
    text-align: right;
    align-self: center;

}