HTMLとCSSの画面レイアウトで横並びの仕方ついて

Question

HTMLとCSSについて勉強中なのですが、分からない事がありましてご質問させていただきました。
初歩的な事だとは思いますが、よろしくお願い致します。

前提・実現したいこと

複数のタグを横ならびで表示させたいです。
イメージ画像を貼らせていただきます。

発生している問題・エラーメッセージ

タグが横並びにならず、下に表示されしまいます。

該当のソースコード

<div class="page-title-box">
  <div class="page-title-right">
  <a href="#" class="btn btn-sm btn-secondary">
  <i class="mdi mdi-plus"></i>
    追加
  </a>
  </div>
  <h1 class="page-title">AAAA</h1>
    <table class="page-title">
        <tbody>
          <tr>
            <td>Table</td>
            <td>100</td>
          </tr>
        </tbody>
      </table>
      <a href="#" class="btn btn-sm btn-secondary">
        Link
      </a>
</div>

.page-title-box .page-title-right {
  float: right;
  margin-top: 20px; }

.page-title-box .breadcrumb {
  padding-top: 8px; }

.page-title-box-sm .page-title {
  line-height: 1 !important;
  margin-bottom: 25px; }

.page-title-box-sm .page-title-right {
  float: right;
  margin-top: 0; }

.page-title-box-sm .breadcrumb {
  padding-top: 0;
  margin-top: -3px !important; }

試したこと

floatを使用してみましたが、横並びになったりならなかったりしております…。
inline等も試しましたが想定の表示にはなりませんでした。

補足情報（FW/ツールのバージョンなど）

OS:Windows10 Pro
HTML、CSS
bootstrapの
Hyper - Responsive Bootstrap 4 Admin Dashboard
を使用しております。

Answer 1

float処理は安定しないのでflexでやるほうがよいでしょう
「追加」はできれば順番を逆に・・・

Comments

[yambejp]

<style>
.page-title-box{
display:flex;
justify-content:space-between
}
.page-title-box div{
display:flex;
align-items: center;
}
</style>
<div class="page-title-box">
<div>
<h1 class="page-title">AAAA</h1>
<table class="page-title">
<tbody>
<tr>
<td>Table</td>
<td>100</td>
</tr>
</tbody>
</table>
<a href="#" class="btn btn-sm btn-secondary">
Link
</a>
</div>
<div>
<a href="#" class="btn btn-sm btn-secondary">
<i class="mdi mdi-plus"></i>
追加
</a>
</div>
</div>

[Hibachi]

yambejp様
ご回答ありがとうございます。
ご教授いただきましたflexを使用して、無事にやりたいことが実現できました！