JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class='container'>
    <div class='box'>
      <form>
        <label>
          <input type="radio" name="points" value="1">point1</label>
        <label>
          <input type="radio" name="points" value="-1">point2</label>
      </form>
      <div class='middle'>just a div</div>
    </div>
    <div class='box'>
      <form>
        <label>
          <input type="radio" name="points" value="1">point1</label>
        <label>
          <input type="radio" name="points" value="-1">point2</label>
      </form>
      <div class='middle'>just a div</div>
    </div>
    <div class='box'>
      <form>
        <label>
          <input type="radio" name="points" value="1">point1</label>
        <label>
          <input type="radio" name="points" value="-1">point2</label>
      </form>
      <div class='middle'>just a div</div>
    </div>
    <div class='box'>
      <form>
        <label>
          <input type="radio" name="points" value="1">point1</label>
        <label>
          <input type="radio" name="points" value="-1">point2</label>
      </form>
      <div class='middle'>just a div</div>
    </div>
  </div>
</body>

CSS

body {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
}

.box {
  background-color: grey;
  padding: 10px;
  margin-bottom: 10px;
  position:relative;
}

.middle {
  background-color: red;
}

input[type="radio"] {
  margin-right: 10px;
}
label {
  position:absolute;
  right:100%;
  margin:0 1em;
  white-space:nowrap;
}
label + label {
  right:auto;
  left:100%;
}