JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
    <li>
        <a href="#">
            <span class="event-time">12:00pm</span>
            <span class="event-name">Event Title</span>
        </a>
    </li>
</ol>

CSS

ol { width: 83%;  margin:0; }
ol li { line-height: 1.2; margin: 0; padding: 5px; list-style-type: none; background: #d4481b; border-radius: 3px; color: #fff; }
a {color: #fff; text-decoration: none;}
span.event-time { width: 20%; float: left }
span.event-name { width: 85%; float: right }