Why aren't inline divs displayed inline? but stacked in a stair pattern

I want to have a header with an image them two texts and the document is right to left. I'm implementing a 12 column division using inline-block display and percent widths and the three objects I've mentioned above are placed in a 2 5 5 spacing(code included).
here's the problem:
they are arranged in a stair-like pattern rather than being inline. Each of the divs falls a little below the previous one(which is on its right since the document is rtl)
I'll include the code below
can someone tell me what I'm doing wrong?

<html dir="rtl" xmlns="http://www.w3.org/1999/html">
<head>
  <style>
    body{
      margin:0px;
    }
    header{
      position:fixed;
      top:0px;
      left:0;
      width:100%;
      height:5%;
    }
    .container-fluid{
      position:relative;
      height:100%;
    }
    .col-5{
      position:relative;
      display:inline-block;
      height:100%;
      margin-right:6px;
      top:0;
      width:40%;
    }
    .col-2{
      position:relative;
      display:inline-block;
      height:100%;
      width:16%;
    }
    .img-cont{
      position:relative;
      height:100%;
      margin-right:auto;
      display:inline-block;
    }
  </style>
</head>
<body>
  <header>
    <div class="container-fluid">
      <div class="col-2">
        <div class="img-cont">
          <img height="100%" src="circle.png"/>
        </div>
      </div>
      <div class="col-5">
        <span style="display:inline-block; font-size:30px; "> سلام </span>
      </div>
      <div class="col-5">
        <span>hello</span>
      </div>
    </div>
  </header>
</body>
</html>

here's a preview

Solution

You can just use display:flex; and arrange then with align-content:center; and justify-content:center;. That will align the divs.

<html dir="rtl" xmlns="http://www.w3.org/1999/html">
<head>
  <style>
    body{
      margin:0px;
    }
    header{
      position:fixed;
      top:0px;
      left:0;
      width:100%;
      height:5%;
    }
    .container-fluid{
      position:relative;
      height:100%;
      display:flex;
      align-content:center;
      justify-content:center;
    }
    .col-5{
      height:100%;
      margin-right:6px;
      width:40%;
    }
    .col-2{
      height:100%;
      width:16%;
    }
    .img-cont{
      height:100%;
      margin-right:auto;
    }
  </style>
</head>
<body>
  <header>
    <div class="container-fluid">
      <div class="col-2">
        <div class="img-cont">
          <img height="100%" src="circle.png"/>
        </div>
      </div>
      <div class="col-5">
        <span style="font-size:30px; "> سلام </span>
      </div>
      <div class="col-5">
        <span>hello</span>
      </div>
    </div>
  </header>
</body>
</html>