JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<div class="uber-container">
  <div class="container">
    <div class="alpha"></div>
    <div class="beta"><span>chevron</span></div>
    <div class="gamma">gamma</div>
  </div>
</div>

CSS

.alpha {
  background: green;
  width: 100px;
  height: 100px;
  position: relative;
}
.alpha:before {
  content: '';
  position: absolute;
  left: 50%;
  background: blue;
  top: 50%;
  padding: 45px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.beta {
  background: pink;
  display: flex;
}

.beta > span {
  margin: auto;
}
.gamma {
  background: red;
  text-align: center;
}

.uber-container {
  display: inline-grid;
}
.container {
  
  display: grid;
  grid-template-columns: auto auto;
}