JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bar">
  <div class="left">Left content</div>
  
  <div class="middle">Middle content</div>
  
  <div class="right">
    <div class="user">
      <svg width="1em" height="1em" alt="User" viewBox="0 0 44 36"><path d="M22 16.81a8.08 8.08 0 118.08-8.08A8.08 8.08 0 0122 16.81zm0-14.46a6.38 6.38 0 106.38 6.38A6.38 6.38 0 0022 2.35zm15 33a.85.85 0 01-.85-.85 14.15 14.15 0 00-28.3 0 .85.85 0 01-1.7 0 15.85 15.85 0 0131.7 0 .85.85 0 01-.85.85z"></path></svg>
    </div>

    <div class="wishlist">
      <svg width="1em" height="1em" alt="Heart" viewBox="0 0 44 36"><path d="M22 34.35a1 1 0 01-.33-.06c-17-7-18.94-16.35-19-20A11.58 11.58 0 019.3 3.46c4.08-1.87 8.78-1 12.7 2.16 3.92-3.21 8.62-4 12.7-2.16a11.58 11.58 0 016.63 10.81c-.06 3.67-2 13-19 20a1 1 0 01-.33.08zM13.85 4.16A9.16 9.16 0 0010 5a9.86 9.86 0 00-5.64 9.23c.06 3.31 1.9 11.7 17.63 18.34 15.73-6.64 17.57-15 17.63-18.34A9.86 9.86 0 0034 5c-3.7-1.69-7.86-.83-11.42 2.36a.86.86 0 01-1.14 0 11.41 11.41 0 00-7.59-3.2z"></path></svg>
    </div>
    
    <div class="cart">
      <svg width="1em" height="1em" alt="Bag" viewBox="0 0 44 36"><path d="M20.77 35.35h-9a5.6 5.6 0 01-4.42-1.86 7 7 0 01-1.19-5.08l1.9-15.91a.84.84 0 01.84-.75h23.67a.84.84 0 01.84.75l1.92 16a6.88 6.88 0 01-1.19 5 5.58 5.58 0 01-4.4 1.86zM9.66 13.45L7.83 28.66a5.24 5.24 0 00.82 3.75 4 4 0 003.12 1.24h18a4 4 0 003.1-1.24 5.27 5.27 0 00.83-3.72l-1.88-15.24zm18.06-4.12a.85.85 0 01-.85-.85 6.14 6.14 0 00-12.27 0 .85.85 0 01-1.7 0 7.84 7.84 0 0115.67 0 .85.85 0 01-.85.85z"></path></svg>
    </div>
  </div>
</div>

CSS

body {
  font-size: 2rem;
}

.bar {
  padding: 0 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.left {
  background-color: red;
}

.middle {
  background-color: green;
  text-align: center;
}

.right {
  background-color: lightblue;
  text-align: right;
}

.right > div {
  display: inline-block;
}

.right > div > svg:hover {
  cursor: pointer;
  fill: orange;
}