JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div id="wrapper" class="clearfix">
  <label class="choice leftChoice">
    <input type="radio" id="choice1" checked="checked" name="choices" value="1">
    <span class="checkmark">Choice 1</span>
  </label>
  <div class="choice_arrow">
    <div class="bullet">
      <span class="fa fa-chevron-left"></span>
    </div>
  </div>
  <label class="choice rightChoice">
    <input type="radio" id="choice2" name="choices" value="2">
    <span class="checkmark">Choice 2</span>
  </label>
</div>

CSS

.clearfix::before {
    content: "";
    display: table;
}
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.choice {
  display: inline-block;
  position: relative;
  cursor: pointer;
  font-size: 25px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 49%;
}

.choice input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.choice > .checkmark {
  position: relative;
  display: block;
  padding: 10px;
  background-color: #eee;
}


.choice:hover input ~ .checkmark {
  background-color: #ccc;
}


.choice input:checked ~ .checkmark {
  background-color: #2196F3;
}

label.choice,
.choice_arrow { float: left; width: 30%; }

.choice_arrow { width: 20% }

.choice_arrow { 
    background: #f00; 
    position: relative; 
    height: 50px; 
    border-radius: 30px; 
    border: 1px solid #ccc;  
}
.choice_arrow > .bullet { 
    border-radius: 50%; 
    width: 44px; 
    height: 44px; 
    position:absolute; 
    background: #ff0; 
    border: 1px solid #ccc; 
    top: 2px; 
}
.choice_arrow > .bullet > span { 
    font-size: 30px; 
    margin-top: 7px; 
    margin-left: 7px; 
}

input#choice1:checked .choice_arrow .bullet { left: 2px; transform: rotate(0deg); }
input#choice2:checked .choice_arrow .bullet { right: 2px; transform: rotate(180deg); }