How do I fix or connect (checkbox) buttons together as to resist shifting when viewing on different browsers?

I am attempting to create a pentagon in css where each edge is a checkbox button. I have created the 5 buttons and changed their size to small, thin rectangles. Using rem units I was able to rotate and position each button so that they form a pentagon shape. However, when shrinking/growing my browser window, the buttons shift around.

I am looking for a way I can attach each button together and move the entire object as one unit to position it on my webpage. I believe the problem lies in the usage of the rem units and % units since they are relative to the entire browser size and not the size of the divider they're in.

The code is the same for each button except the id/className/label and the position (top/left) relative on the page.

JavaScript

<li> 
    <input type="checkbox"
     id="Taily"
     className="defect-taily"/>
     
     <label for="Taily"> Taily </label>    
</li>

CSS

.defect-taily-pentagon {
  width:.3rem;
  height:4.7rem;
  background:#d70022;

  position: relative;
  transform: rotate(56deg);
  top: -90%;
  left: 100%;
}

P.S. I am unable to post a picture since this is my first post on stackoverflow. When I am able, I will post an image.