JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navCont">
  <div class="arrowPrev">&larr;</div>
  <div class="arrowNext">&rarr;</div>
  <div class="socialButtons">Social Buttons</div>
</div>

CSS

.navCont {
    background: #f6f6f6;
    border-radius: 5px;
    clear: both;
    overflow: hidden;
    padding: 5px 10px;
}

.arrowPrev {
    float: left;
}

.socialButtons {
    text-align: center;
}

.arrowNext {
    float: right;
}


@media (max-width: 320px) {
  .socialButtons {
    float: none;
    clear: both;
  }
}