JSFiddle - React, Tailwind, and code Playground

HTML

<div class="opponents_list">
    <b class="opponent_list_bold_name">bob</b>
    <div style="line-height: 3em; float: right;">
    <button class="opponent_list_button" type="button">Invite</button>
    </div>
</div>

CSS

.opponents_list {
    width: 100vw;
    height: 3em;
    margin: 0.1em auto;
    background: #333;
    line-height: 3em;
}
.opponent_list_bold_name {
    line-height: 3em;
}