JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" class="dtable">
  <div id="header" class="dtrow">
    <div class="dtcell" id="logo">
      <span>logo</span>
      <span>hamburgermenu</span>
    </div>
    <div class="dtcell">
      <div>links</div>      
      <span>phone</span><!-- 
      --><span>social</span>
    </div>    
  </div>
</div>

CSS

.dtable {  display: table;  width: 100%; }
.dtcell {  display: table-cell;  padding: 10px; }
.dtcptn {  display: table-caption; }
.dtrow  {  display: table-row; }
.dtcell:first-child {
  width: 1px;
}
.dtcell:first-child span {
  display: inline-block;
  border: 1px solid;
  box-sizing: border-box;
}
.dtcell:first-child span:last-child {
  display: none;
}
.dtcell:last-child div {
  border: 1px solid;
  box-sizing: border-box;
}
.dtcell:last-child span {
  display: inline-block;
  width: 50%;
  border: 1px solid;
  box-sizing: border-box;
}
  
@media screen and (max-width: 600px) {
  .dtcell:first-child {
    width: 100%;
  }
  .dtcell:first-child span:last-child {
    display: inline-block;
  }
  .dtcell,
  .dtcell:last-child span {
    display: block;
    width: auto;
  }
  .dtcell:last-child div {
    display: none;
  }
}