Browser image render break css inline-block layout

问题

I have 2 div with 50% width and inline-block, on this div have a image. I'm expected 2 div will stay in one line, but sometime, browser break the layout.

Here is html :

<div class="views-field views-field-title">
    <span class="field-content">
    <div class="field_home_team-wraper"><a href="/tran-dau/arsenal-vs-west-bromwich-albion-truc-tiep"><h2>Arsenal</h2><img src="/sites/default/files/styles/logo_150x150/public/2016-12/team_logo-2000x2000.png?itok=L_wkCsC6" width="150" height="150" alt="Arsenal logo" typeof="Image" class="image-style-logo-150x150"></a></div><div class="versus-wraper">v</div><div class="field_away_team-wraper"><a href="/tran-dau/arsenal-vs-west-bromwich-albion-truc-tiep"><h2>West Brom</h2><img src="/sites/default/files/styles/logo_150x150/public/2016-12/West_Bromwich_Albion.png?itok=vZlNXq8J" width="150" height="150" alt="West Bromwich Albion logo" typeof="Image" class="image-style-logo-150x150"></a></div>
    </span>
</div>

Here is css :

div.view-id-current_match_of_the_day div.views-field-title {
    position: relative;
    margin-bottom: 5px;
}

.view-id-current_match_of_the_day div.field_home_team-wraper, .view-id-current_match_of_the_day div.field_away_team-wraper {
    width: 50%;
    padding-bottom: 1.5em;
}

.view-id-current_match_of_the_day div.field_home_team-wraper, .view-id-current_match_of_the_day div.field_away_team-wraper {
    display: inline-block;
    position: relative;
}

.view-id-current_match_of_the_day div.field_home_team-wraper img, .view-id-current_match_of_the_day div.field_away_team-wraper img {
    width: 40%;
}

.view-id-current_match_of_the_day div.versus-wraper {
    width: 10%;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
}

As i say, I'm expected 2 div will stay in one line, like this :

But it not render correctly.

When first load, layout break to 2 lines like this:

Chrome on PC (resize windows width less than 1024px for mobile responsive) and Chromme on IOS/Android have this problem, Safari on IOS have this problem too.

Firefox, Edge on PC not have problem.

When click on homepage button or click something then go back to homepage, layout become render very good.

So i realize, at the first load (or refresh load), when browser requesting image to server, server not finished respone, browser already finished render the page, when image load finish, browser make a broken layout.

When second load (click on home page again), browser get the image from local cache, layout render is just good, correctly!

I record video here :

Chrome on PC (at 30 seconds, i press Ctrl+F5 for ignore cache reload) : https://streamable.com/8xpdx
Chrome on IOS : https://streamable.com/3bu5y

I can fix this if i add float:left to div.field_home_team-wraper and and div.field_away_team-wraper, but i need to avoid float in my css.

Another fix is remove div.versus-wraper, but i need this div and this div have absolute position, so it not in the line.

I aleady know there a space between 2 inline-block elements, so i removed space in my html : How to remove the space between inline-block elements?

I don't know what wrong here, please help.