JSFiddle - React, Tailwind, and code Playground

HTML

<div class="opponents_list"><b class="opponent_list_bold_name">bob</b>
    <button class="opponent_list_button" type="button">Invite</button>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">harri</b>
    <button class="opponent_list_button" type="button">Invite</button>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">harri2</b>
    <button class="opponent_list_button" type="button">Invite</button>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">kaleeem</b>
    <button class="opponent_list_button" type="button">Invite</button>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">nehaaa</b>
    <button class="opponent_list_button" type="button">Invite</button>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">nitiisha</b>
    <button class="opponent_list_button" type="button">Invite</button>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">rangi</b>
    <button class="opponent_list_button" type="button">Invite</button>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">tom</b>
    <button class="opponent_list_button" type="button">Invite</button>
</div>

CSS

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