JSFiddle - React, Tailwind, and code Playground

HTML

<div class="buttons">
  <label class="inputbox"><input type="radio" name="side" value="left"><span>Left</span></label>
  <label class="inputbox"><input type="radio" name="side" value="middle"><span>Middle</span></label>
  <label class="inputbox"><input type="radio" name="side" value="right"><span>Right</span></label>  
</div>

CSS

.buttons {
  margin: 0 auto;
  width: 50%;
  border: solid 1px black;
}

.inputbox {
  background-color: red;
  
  overflow: hidden;
}

.inputbox > input {
  position: relative;
  left: -50%;
}

.inputbox > input:focus + span {
  color: red;
}