通过单击其父包装器选择输入单选

Question

我有一个tile，类型为input的{​​{1}}，在这两个元素下面有一个radio和一个label文字。 span和input与label连接。它们应该彼此相邻。 id应该在span的正下方。到目前为止，该方法有效，并且我的布局匹配。如果我在label或click上input，则label得到radio。现在，我想做的是，通过单击selected来select radio，在任何地方都可以。因此，每次点击tile都应选择我的tile。我想用纯radio解决这个问题，如果可能的话，不使用HTML/CSS。我唯一的想法是将JS赋予position: relative;，将radio和position: absolute;赋予radio__wrap并使它们具有label width/height中的100%，因此我可以将label覆盖整个tile。这个想法使我的布局崩溃了（很难正确放置span）。有没有一种方法可以通过使用纯HTML/CSS来解决。以下是我的代码段：

.tile {
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
  margin-bottom: 30px;
}

.tile__wrap {
  position: relative;
}

.radio {
  padding: 24px 16px 16px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.radio__wrap {
  margin-bottom: 10px;
}

.radio__label {
  background-color: lightblue;
  position: relative;
}

.radio__text {
  padding-left: 24px;
  display: block;
}

.tile--clickable .radio__wrap {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.tile--clickable .radio__label {
  width: 100%;
  height: 100%;
}

<div class="tile">
  <div class="tile__wrap">
    <div class="radio">
      <div class="radio__wrap">
        <input class="radio__input" id="radio01" type="radio">
        <label class="radio__label" for="radio01">I'm the label</label>
      </div>
      <span class="radio__text">I'm the text</span>
    </div>
  </div>
</div>