要素の横並びができず困っています。

はじめまして。menu-image要素とmenu-text要素を横並びにしたいのですが、できずに困っています。初歩的な質問だとは思いますが、自身で解決できずに困っています。宜しくお願い致します。

.tab-pane {
  display: flex;
}

.menu-tab {
  display: flex;
  width: 50%;
  background-color: red;
}

.menu-image {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: blue;
}

.menu-image img {
  border-radius: 20px;
}

.name {
  width: 50%;
}

.price {
  width: 50%;
}

        <div class="container">
            <div class="row">
                <div class="col-12">
                    <ul class="nav nav-tabs">
                        <li class="nav-item"><a href="#set-menu" class="nav-link active" data-toggle="tab">定食・鍋</a></li>
                        <li class="nav-item"><a href="#baked-menu" class="nav-link" data-toggle="tab">焼き物</a></li>
                    </ul>
                </div>
            </div>

            <div class="tab-content">
                <div class="tab-pane active" id="set-menu">
                    <div class="menu-image">
                        <img src="img/menu-img.jpg">
                    </div>

                    <div class="menu-text">
                        <div class="menu-tab">
                            <p class="name">A定食</p>
                            <p class="price">1350円</p>
                        </div>
                        <div class="menu-tab">
                            <p class="name">B定食</p>
                            <p class="price">1350円</p>
                        </div>
                        <div class="menu-tab">
                            <p class="name">C定食</p>
                            <p class="price">930円</p>
                        </div>
                        <div class="menu-tab">
                            <p class="name">D鍋</p>
                            <p class="price">1050円</p>
                        </div>
                    </div>
                </div>

                <div class=" tab-pane" id="baked-menu">
                    <div class="menu-image">
                        <img src="img/menu-img.jpg">
                    </div>

                    <div class="menu-text">
                        <div class="menu-tab">
                            <p class="name">D</p>
                            <p class="price">650円</p>
                        </div>
                        <div class="menu-tab">
                            <p class="name">E</p>
                            <p class="price">950円</p>
                        </div>
                        <div class="menu-tab">
                            <p class="name">F</p>
                            <p class="price">650円</p>
                        </div>
                        <div class="menu-tab">
                            <p class="name">G</p>
                            <p class="price">1350円</p>
                            <div class="menu-tab">
                                <p class="name">H</p>
                                <p class="price">1450円</p>
                            </div>
                            <div class="menu-tab">
                                <p class="name">I</p>
                                <p class="price">350円</p>
                            </div>
                        </div>
                    </div>
                </div>
              </div>
           </div>