Исправлено пространство между элементами с CSS

Question

У меня есть элемент Label с текстом и Span внутри. Текст метки изменяется по клику пользователя (становится короче / больше). Если я поместил поле слева в промежуток, тогда, когда текст метки становится короче / больше, промежуток перемещается вместе с ним. Я хочу, чтобы промежуток был stati c, независимо от того, находится ли элемент рядом с ним, становится короче / больше. По какой-то причине я не знаю (я немного новичок с css), позиционирует диапазон с абсолютным (если вы можете объяснить мне, почему это было бы здорово). Есть ли более эффективный способ сделать это? Должен ли я по-прежнему использовать абсолютное / относительное позиционирование, имея Flexbox и CSS Grid? Не обращайте внимания на компонент <Wrapper>. Это просто HO C, который возвращает своих детей, чтобы не помещать все в <div>.

import React, { useState } from 'react';
import styled from 'styled-components';
import Wrapper from '../HOCs/Wrapper';

const ToggleCheckbox = styled.input`
  display: none;
`;

const ToggleLabel = styled.label`
  cursor: pointer;
  padding: 2rem;
  display: inline-block;
  font-size: 1.6rem;
`;

const ToggleSpanBackground = styled.span`
  background-color: #e3dede;
  border-radius: 100px;
  display: inline-block;
  width: 40px;
  height: 10px;
  position: absolute;
  left: 14rem;
  top: 2.5rem;
  cursor: pointer;

  ${ToggleCheckbox}:checked + ${ToggleLabel} & {
    background-color: #2b90d9;
  }
`;

const ToggleSpanButton = styled.span`
  width: 2rem;
  height: 2rem;
  border-radius: 50px;
  display: inline-block;
  background-color: #e3dede;
  position: absolute;
  top: -0.5rem;
  left: 0.3rem;

  ${ToggleCheckbox}:checked + ${ToggleLabel} ${ToggleSpanBackground} &  {
    background-color: #2b90d9;
    left: 1.8rem;
  }
`;

export default function Toggle(props) {
  let [toggle, setToggle] = useState('off');

  return (
    <Wrapper>
      <ToggleCheckbox type='checkbox' id='toggle-checkbox'></ToggleCheckbox>
      <ToggleLabel
        htmlFor='toggle-checkbox'
        onClick={() =>
          setToggle((prevState) => {
            if (prevState === 'off') {
              return 'on';
            } else {
              return 'off';
            }
          })
        }
      >
        option: {toggle}
        <ToggleSpanBackground>
          <ToggleSpanButton></ToggleSpanButton>
        </ToggleSpanBackground>
      </ToggleLabel>
    </Wrapper>
  );
}

Answer 1

Ну, абсолютное положение эффективно выводит элемент из потока DOM. Таким образом, вещь, которая становится больше, больше не касается ее, поэтому, когда она становится больше, она не влияет на ее положение.

Я бы сделал так, чтобы промежуток имел фиксированную ширину, достаточно большую для длинного или короткого значения.