inline display does not work!

Question

I’d like to keep it that way:

But it just stays that way:

Css code:

.ro{
text-align: center;
display: inline;
}

Php code:

    <div class="ro">
    <div class="col-4 text-center">
        <p>_______________________________________</p>
        <p>Coordenador Pedagógico</p>
    </div>
    <div class="col-4 text-center">
        <p>_______________________________________</p>
        <p>Gestor</p>
    </div>

Answer 1

There are several ways to solve this, I’ll give you the one I find simpler that is putting both div class .ro within a container with felx. The flex will make you both div side by side, and with justify-content: center; you line up everything in the center

See the code:

.ro{
  text-align: center;
  display: inline;
  margin: 10px;
}
.container {
  display: flex;
  justify-content: center;
}



    

<div class="container">
  <div class="ro col-4 text-center">
      <p>_______________________________________</p>
      <p>Coordenador Pedagógico</p>
  </div>
  <div class="ro col-4 text-center">
      <p>_______________________________________</p>
      <p>Gestor</p>
  </div>
</div>