如何将导航栏拆分为同一行中的两个部分？

<div class="navbar">
  <div class="left-section">
    <!-- 左侧部分的内容 -->
  </div>
  <div class="right-section">
    <!-- 右侧部分的内容 -->
  </div>
</div>

.navbar {
  width: 100%;
}

.left-section {
  width: 50%;
  float: left;
}

.right-section {
  width: 50%;
  float: right;
}

<div class="navbar">
  <div class="left-section">
    <!-- 左侧部分的内容 -->
  </div>
  <div class="right-section">
    <!-- 右侧部分的内容 -->
  </div>
</div>

.navbar {
  display: flex;
}

.left-section {
  flex: 1;
}

.right-section {
  flex: 1;
}

<div class="navbar">
  <div class="row">
    <div class="col-sm-6">
      <!-- 左侧部分的内容 -->
    </div>
    <div class="col-sm-6">
      <!-- 右侧部分的内容 -->
    </div>
  </div>
</div>