how to have two text fields next to each other instead of below each other

I am trying to have Backend information and app information next to each other instead of everything below each other.

  <div class="row justify-content-center">
          <div class="card text-center alert alert-success">
            <div class="col-12">
              <div class="card-header fa fa-server fa-2x" > Backend_12345</div>
              <div class="col-12">
              <div class="card-body">
                  <h5 class="card-title fa fa-building fa-2x">Arbeits-Helden-Hannover</h5>
                  <p class="card-text"></p>
                  <h4>Backend-Information</h4>
                  <h6>Gebuchte App-Benutzer: 8</h6>
                  <h6>App-Benutzer: 4</h6>
                  <h6>App-Benutzer in %: 50 %</h6>

                  <h4>App-Information</h4>
                  <h6>Gebuchte App-Benutzer: 77</h6>
                  <h6>App-Benutzer: 66</h6>
                  <h6>App-Benutzer in Prozent: 44 %</h6>
              </div>
             </div>
         </div>
    </div>