JSFiddle - React, Tailwind, and code Playground

HTML

<ol class="chat">
            <li>
              <cite class="label odd user_1">user 1:</cite>
              <span class="odd user_1">
                stuff they said
              </span>
            </li>
            <li>
                <cite class="label even user_2">and user 2:</cite>
              <span class="even user_2">
                stuff they said
              </span>
            </li>
        </ol>

CSS

ol.chat {
    list-style-type: none;
    display: flex;
    flex-direction: column;
}
ol.chat li {
    display: flex;
}
ol.chat cite.label {
    font-weight: bold;
    font-style: normal;
    text-align: right;
    width: 15%;
}
ol.chat span {
    flex: 1;
    margin-left: 1em;
}