HTML - Placing Headers Side By Side

Question

I couldn't seem to put both of the headers next to each other in the same line. And also, I would like to align the headers to the center of the page.

Need help on this please.

.inline-div {
  display: inline;
}

h4
{
  text-align: center;
}

<div class="inline-div">
  <h4>Product Tested :</h4>
  <h4>Profile Tested :</h4>
</div>

Answer 1

.inline-div {
  display: block;
  text-align: center;
}

h4
{
  display: inline-block;
  text-align: center;
}

<div class="inline-div">
  <h4>Product Tested :</h4>
  <h4>Profile Tested :</h4>
</div>

Answer 2

.inline-div {
  display: inline;
  
}

h4
{
  text-align: center;
  display: inline-block;
}

<div class="inline-div">
  <h4>Product Tested :</h4>
  <h4>Profile Tested :</h4>
</div>

add display: inline-block; to h4

.inline-div {
  display: inline;
}

h4
{
  text-align: center;
  display: inline-block;
}

<div class="inline-div">
  <h4>Product Tested :</h4>
  <h4>Profile Tested :</h4>
</div>