I am making a toggle for which I am using Radio input. But I am getting gaps in between the parent and the child.what’s perplexing me is if we have the same component multiple times in a page the gaps are not consistent. sometimes they have a gap sometimes they don’t.
I have kept everything as border-box for box-sizing and since I saw some answers suggesting issues with inline-block I have used flex only.

output Image

:root{
  --common-color: #24587D;
}
*{
  box-sizing: border-box;
}
.timeframe {
  display: flex;
  border: 1px solid var(--common-color);
  border-radius: 4px;
  overflow: hidden;
  width: fit-content;
  margin-bottom: 20px;
}

.timeframe-radio {
  margin-left: -1px;
  height: 40px;
  display: flex;
}

.timeframe-radio-input {
  appearance: none;
}

.timeframe-radio-input:checked + label {
  background-color: var(--common-color);
  color: #fff;
}

.timeframe-radio-label {
  cursor: pointer;
  line-height: 28px;
  font-size: 14px;
  height: 40px;
  margin: 0;
  padding: 8px 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>

here’s the link to the code.
https://jsfiddle.net/mraza007/awxshm7n/10/

Md Ahsan Raza is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

1