JSFiddle - React, Tailwind, and code Playground

HTML

<table id="1" class="match">
    <tr class="teams">
        <td class="team1" colspan="2">Команда 1</td>
        <td class="team1"></td>
        <td class="team1" colspan="2">Команда 2</td>
    </tr>
    <tr class="teams">
        <td class="team1">
            <img src="image/team.jpg" alt="картинка" />
        </td>
        <td class="team1">(26%)</td>
        <td class="vs">VS</td>
        <td class="team1">(26%)</td>
        <td class="team1">
            <img src="image/team.jpg" alt="картинка" />
        </td>
    </tr>
</table>

CSS

* {
    margin: 0;
    padding: 0;
}
body, html {
    margin:0px;
    padding:0px;
    height:100%;
    /* Высота 100% для экрана */
    background-color: #000;
    color:#DAA520;
    font-family: Arial;
    font-size: 21px;
}
.match {
    width:100%;
    height:100px;
    border: 1px solid #4f4f4f;
}
.match .team1 {
    width:44%;
    border: 1px solid #4f4f4f;
}
.match .team1 .team_content {
    width:100%;
    position:relative;
    left:45%;
}
.match .team1 .team_content img {
    margin:auto 10px;
}
.match .team1 .team_content .procent {
    position:relative;
    bottom:15px;
}
.match .team2 {
    width:44%;
    border: 1px solid #4f4f4f;
}
.match .team2 .team_content {
    width:100%;
    position:relative;
    left:45%;
}
.match .team2 .team_content img {
    margin:auto 10px;
}
.match .team2 .team_content .procent {
    position:relative;
    bottom:15px;
}
.match .team .vs {
    position:relative;
    border: 1px solid #4f4f4f;
    margin:50%;
}