Div in div in a tab

Question

I want to use a nav bar in my page. But when I put some div in the div tab content I want them to be side by side, but they put themself below. Exemple I want them to be like this " TEST TEST TEST " Instead they are like this "
TEST
TEST
TEST "

Where is my fault ?

<div class="send-message">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="section-heading">
          <h2 style="text-align: center;">Réservations</h2>
        </div>
      </div>
      <div class="col-sm-2" style="text-align: center;"></div>
      <div class="col-sm-8" style="text-align: center;">
        <ul class="nav nav-pills nav-fill" style="text-align: center;">
          <li class="nav-item active"><a class="nav-link active" data-toggle="pill" href="#resPas">Réservations passées</a></li>
          <li class="nav-item "><a class="nav-link" data-toggle="pill" href="#resAct">Réservations actives</a></li>
        </ul>
      </div>
      <div class="col-sm-2" style="text-align: center;"></div>
      <div class="col-md-12">
        <div class="tab-content">
          <div id="resPas" class="tab-pane fade show active">
            <div class="col-md-4">Test</div>
            <div class="col-md-4">Test</div>
            <div class="col-md-4">Test</div>
          </div>
        </div>
      </div>
    </div>
  </div>

Thank you for the help guys !

Answer 1

<style>
.table-side{
display:flex;
flex-direction:row;
justify-content:space-around;

}
</style>
<div class="send-message">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="section-heading">
          <h2 style="text-align: center;">Réservations</h2>
        </div>
      </div>
      <div class="col-sm-2" style="text-align: center;"></div>
      <div class="col-sm-8" style="text-align: center;">
        <ul class="nav nav-pills nav-fill" style="text-align: center;">
          <li class="nav-item active"><a class="nav-link active" data-toggle="pill" href="#resPas">Réservations passées</a></li>
          <li class="nav-item "><a class="nav-link" data-toggle="pill" href="#resAct">Réservations actives</a></li>
        </ul>
      </div>
      <div class="col-sm-2" style="text-align: center;"></div>
      <div class="col-md-12">
        <div class="tab-content">
          <div id="resPas" class="tab-pane table-side fade show active">
            <div class="col-md-4">Test</div>
            <div class="col-md-4">Test</div>
            <div class="col-md-4">Test</div>
          </div>
        </div>
      </div>
    </div>
  </div>

I created a seperate class table-side and add some flex properties which made div to come side by side