Sometimes Form Input create problems with Label and specially when we use overflow: hidden in parent.
Step 1: Remove overflow: hidden; from parent css.
.timeframe { display: flex; border: 1px solid var(--common-color); border-radius: 4px; width: fit-content; margin-bottom: 20px;}Step 2: Remove margin-left: -1px; and add align-items: center; in below css.
.timeframe-radio { align-items: center; height: 40px; display: flex;}Step 3: Remove appearance: none; and add display: none; in below css.
.timeframe-radio-input { display: none;}Step 4: Remove line-height: 28px;, height: 40px;, margin: 0; and update padding: 12px 17px 12px 16px; in below css.
.timeframe-radio-label { cursor: pointer; font-size: 14px; padding: 12px 17px 12px 16px; transition: background-color 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);}I also update all changes in below code snippet. I hope it'll help you out.
:root{ --common-color: #24587D;}*{ box-sizing: border-box;}.timeframe { display: flex; border: 1px solid var(--common-color); border-radius: 4px; width: fit-content; margin-bottom: 20px;}.timeframe-radio { align-items: center; height: 40px; display: flex;}.timeframe-radio-input { display: none;}.timeframe-radio-input:checked + label { background-color: var(--common-color); color: #fff;}.timeframe-radio-label { cursor: pointer; font-size: 14px; padding: 12px 17px 12px 16px; transition: background-color 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);}<div class="timeframe"><div class="timeframe-radio"><input class="timeframe-radio-input" id="sub-radio-1" checked type="radio" name="subscriberTimeframeToggle"><label for="sub-radio-1" class="timeframe-radio-label"> Monthly</label></div><div class="timeframe-radio"><input class="timeframe-radio-input" id="sub-radio-2" type="radio" value="daily" name="subscriberTimeframeToggle"><label for="sub-radio-2" class="timeframe-radio-label"> Daily</label></div></div><div class="timeframe"><div class="timeframe-radio"><input class="timeframe-radio-input" id="unsub-radio-1" checked type="radio" name="unsubscriberTimeframeToggle"><label for="unsub-radio-1" class="timeframe-radio-label"> Monthly</label></div><div class="timeframe-radio"><input class="timeframe-radio-input" id="unsub-radio-2" type="radio" value="daily" name="unsubscriberTimeframeToggle"><label for="unsub-radio-2" class="timeframe-radio-label"> Daily</label></div></div><div class="timeframe"><div class="timeframe-radio"><input class="timeframe-radio-input" id="net-sub-radio-1" checked type="radio" name="netSubscriberTimeframeToggle"><label for="net-sub-radio-1" class="timeframe-radio-label"> Monthly</label></div><div class="timeframe-radio"><input class="timeframe-radio-input" id="net-sub-radio-2" type="radio" value="daily" name="netSubscriberTimeframeToggle"><label for="net-sub-radio-2" class="timeframe-radio-label"> Daily</label></div></div>