JSFiddle - React, Tailwind, and code Playground

HTML

<div id="footer">
    <div class="buttons" style="float:left">
        <a href="">User Name unknown length</a>
        <a href="">Image</a>
    </div>
    
    <div id="flash">
        text appear here, and this text is very long, and this text is very long, and this text is very long, and this text is very long, and this text is very long, and this text is very long, and this text is very long, and this text is very long, and this text is very long, and this text is very long.
    </div>
    
    <div class="buttons" style="float:right">
        <a href="" style="padding:2px 10px 2px 7px;" class="cancel">Image</a>
        <a href="" style="padding:2px 10px 2px 7px;" class="submit">Image</a>
    </div>
</div>

CSS

#flash {
    float:left;
    width: auto;
    font-size: small;
    font-style: italic;
    text-align: center;
}