Responsivness:div resizes depending on inline div - html

Question

First div element is facing downwards,i've had this kind of problem and could not understand it, i'm just making simple grid layout 24% | 50% | 24% but as you see first div is doing weird thing, if you solve it and explain why this phenomenon happens and am i doing this simple grid correctly please give your opinions,thanks in adnvance.
html {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
border: 0;
font-size: 25px;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.nav-top {
width: 100%;
background-color: #f00000;
}
.row {
width: 100%;
display: inline-block;
color: #fff;
border: 1px solid gray;
}
.row p {
font-size: 90%;
float: left;
}
.nav-top-col-sm {
width: 24%;
display: inline-block;
}
.nav-top-col-sm span {
float: right;
}
.nav-top-col-lg {
width: 50%;
display: inline-block;
background-color: black;
}
<nav class="nav-top">
<div class="row">
<div class="nav-top-col-sm">
<span>En</span>
</div>
<div class="nav-top-col-lg">
<p>FB,Twitter,Google,Wifi,Youtube</p>
<p>market</p>
</div>
<div class="nav-top-col-sm">
<p>My Account</p>
</div>
<!-- Col-->
</div>
<!-- Row -->
</nav>

Answer 1

When you set the display property to inline or inline block, you should set
vertical-align: middle; for them.
Also u dont need to set the width to 24% to get them on one line.
U need to set the font size:0 on the parent, and give individual font sizes to each inline-block.
This happens because, the inline blocks have some white-space, which pushes them on next line, when 25% width is given.
html {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
border: 0;
font-size: 25px;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.nav-top {
width: 100%;
background-color: #f00000;
}
.row {
width: 100%;
display: inline-block;
color: #fff;
border: 1px solid gray;
}
.row p {
font-size: 90%;
float: left;
}
.nav-top-col-sm {
width: 24%;
display: inline-block;
vertical-align: middle;
font-size: 20px;
}
.nav-top-col-sm span {
float: right;
}
.nav-top-col-lg {
width: 50%;
display: inline-block;
background-color: black;
vertical-align: middle;
font-size: 20px;
}
<nav class="nav-top">
<div class="row">
<div class="nav-top-col-sm">
<span>En</span>
</div>
<div class="nav-top-col-lg">
<p>FB,Twitter,Google,Wifi,Youtube</p>
<p>market</p>
</div>
<div class="nav-top-col-sm">
<p>My Account</p>
</div>
<!-- Col-->
</div>
<!-- Row -->
</nav>