Лучший способ сделать радиокнопки из другого контента

Question

Я пытаюсь сделать страницу с контактными карточками, заказанными с помощью флекс-бокса. Если щелкнуть карточку, должна появиться некоторая информация об этом человеке.

Мои решения (также показаны ниже):

• Используйте радиокнопки с абсолютным положением и размером, заданными в пикселях.
  • Недостатком является то, что динамические флексбоксы c больше не могут использоваться. И размеры жестко закодированы таким образом.
• Используйте радиокнопки с положением и размером по умолчанию.
  • У этого недостатка есть то, что кнопка плавает над картой, а не перед ней.

Мой вопрос: как заставить плавающее радио-кнопку в перед элементом flexbox и использовать его размер?

// This function is just to show radiobuttons working
function updatePersonnelParagraph() {
  document.getElementById("personnel-paragraph").innerHTML = "";
  const ele = document.getElementsByTagName("input");

  for (let i = 0; i < ele.length; i++)
    if (ele[i].type === "radio" && ele[i].name === "Personnel" && ele[i].checked) {
      document.getElementById("personnel-paragraph").innerHTML +=
        ele[i].value;
      break;
    }
}

window.onload = updatePersonnelParagraph;

.personnel-container {
  display: flex;
  flex-direction: row;
}

.personnel-radiobutton1 {
  position: absolute;
  z-index: 1;
  // opacity: 0;
  width: 100px;
  height: 105px;
  cursor: pointer;
}

.personnel-radiobutton2 {
  z-index: 1;
  // opacity: 0;
  cursor: pointer;
}

input[type="radio"]:checked+h3 {
  color: blue;
}

.personnel-item {
  display: flex;
  flex-direction: column;
  margin: 10px;
}

.personnel-paragraph {
  margin: 10px 10%;
  text-align: center;
}