Multi-Object position HTML/CSS - html

Question

I've been trying to get this postioning right for a long time, her's a sketch of that it's supposed to look like:
Here's the css that I got going:
.team1 {
margin-left: 9;
}
.team2 {
float: right;
right: 10;
position: relative;
}
.team1text{
float: left;
left: 150;
top:50;
position: relative;
}
.team2text{
float: right;
right: 150;
top:30;
position: relative;
}
.team1winlose{
float: left;
left: 150;
top:50;
position: relative;
}
.team2winlose{
float: right;
right: 150;
top:50;
position: relative;
}
.vs {
positon: relative;
top: 30;
float: right;
right: 50%;
}
But it now looks like this when I open the page:

Answer 1

With flexbox you could do like this
.wrapper {
display: flex;
}
.wrapper .logo {
flex: 0;
}
.wrapper > :not(.logo) {
flex: 1;
text-align: center;
word-break: break-all;
}
.wrapper :not(.logo) div {
font-size: 32px;
font-weight: bold;
}
.wrapper :not(.logo) span {
font-size: 16px;
}
.wrapper .separator {
flex: 0;
min-width: 70px;
}
<div class="wrapper">
<div class="logo">
<img src="http://placehold.it/150">
</div>
<div>
<div>Team 12345678</div>
<span>Wins/Losses</span>
</div>
<div class="separator">
<div>VS</div>
</div>
<div>
<div>Team 2</div>
<span>Wins/Losses</span>
</div>
<div class="logo">
<img src="http://placehold.it/150">
</div>
</div>
For older browsers, display: table
.wrapper {
display: table;
width: 100%;
}
.wrapper .logo {
display: table-cell;
width: 150px;
}
.wrapper > :not(.logo) {
display: table-cell;
width: 20%;
text-align: center;
vertical-align: top;
}
.wrapper :not(.logo) div {
font-size: 32px;
font-weight: bold;
}
.wrapper :not(.logo) span {
font-size: 16px;
}
<div class="wrapper">
<div class="logo">
<img src="http://placehold.it/150">
</div>
<div>
<div>Team 1</div>
<span>Wins/Losses</span>
</div>
<div>
<div>VS</div>
</div>
<div>
<div>Team 2</div>
<span>Wins/Losses</span>
</div>
<div class="logo">
<img src="http://placehold.it/150">
</div>
</div>