two divs lying horizontally centered in wrapping div

Question

I'm trying to create an html element like in the image. Buttons are fine, but i can't set two divs below properly. Tried many combinations of floats, position, display etc. but nothing worked. I'm not allowed to change the navbar css.

#navbar5 {
  float: left;
  width: 35%;
}

<div id="navbar5">
  <button> abc </button>
  <button> def </button>
  <div id="one"> xxxxxxx </div>
  <div id="two"> yyyyyyy </div>
</div>

Answer 1

#navbar5 {
  width: auto;
  text-align: center;
  float: left;
}

.simple_text {
  display: flex;
  justify-content: center;
}

#two,
#navbar5 button:last-of-type {
  margin: 0 0 0 10px;
}

<div id="navbar5">
  <button> abc </button>
  <button> def </button>
  <div class="simple_text">
    <div id="one"> xxxxxxx </div>
    <div id="two"> yyyyyyy </div>
  </div>
</div>