JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top-bar-container">
            <div class="top-bar-content">
                <dl class="info-list">
                    <dt>Important - Lord of the rings - Definitive Edition coming to your home now <a href="#" title="Read More">Read More</a></dt>
                    <dt><img src="https://svgshare.com/i/fnH.svg" alt="Nintendo Switch"></dt>
                </dl>
            </div>
        </div>

CSS

div.top-bar-container {
    position:relative;
    z-index:5;
    width:100%;
    height:auto;
    background:#e4000f;
    color:#fff;
    font-family: 'Noto Sans', sans-serif;
    text-transform:uppercase;
    max-height:3em;
}

div.top-bar-container .top-bar-content {
    margin:0 auto;
    text-align:center;
    width:100%;
}

div.top-bar-container .top-bar-content dl, div.top-bar-container .top-bar-content dl dt {
    display:inline-block;
}

div.top-bar-container .top-bar-content img {
    width:100%;
    margin:0;
    padding:0;
}