Как я могу расположить два <divs>, чтобы всегда быть рядом

У меня есть следующий HTML:

<div class="block-content table">
   <div class="row" style="height: 5rem">
      <div class="cell" id="logo">xxx</div>
      <div class="cell" id="navigation">
         xxxxx
      </div>
   </div>
</div>

При отображении полной ширины логотип появляется слева и справа направо. Однако, когда я уменьшаю ширину браузера, навигация перемещается ниже логотипа.

.cell {
  display: table-cell;
}
.row {
  display: table-row;
}
.table {
  display: table;
}

#header-view .top-page .block-content {
  bottom: 1rem;
  left: 1rem;
  padding: 0;
  position: absolute;
  right: 1rem;
  top: 1rem;
}
#header-view .top-page .block-content #logo {
  height: 5rem;
  width: 20rem;
  margin-right: 2rem;
  text-align: center;
  line-height: 5rem;
}
#header-view .top-page .block-content #navigation {
  height: 5rem;
  text-align: left;
  line-height: 5rem;
  margin-left: 2rem;
  width: 40rem;
}

Как я могу гарантировать, что логотип и навигация всегда появляются бок о бок? Примечание. Я попытался сделать #logo и #navigation как "display: inline-block", однако это, похоже, не помогло, поэтому я попытался использовать таблицы css, но он все еще не работал.