<div class="colors">
		<div class="circle"></div>
		<div class="arrow">
      <i class="fa fa-arrow-right fa-2x" aria-hidden="true"></i>
    </div>
		<div class="circle change"></div>
</div>
<script src="https://use.fontawesome.com/749e954855.js"></script>
@color-base: hsl(58, 97%, 49%);
@color-change: lighten(@color-base, 30%);
.fa {
  color: #ccc;
}
.colors {
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  width: 100%;
  align-items: center;
  height: 150px;
  
  .circle {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background: @color-base;    
    
    &.change {
      background: @color-change;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.